blocks|key|4475352|text|你想要做的就是使用<a>标签在页面的顶部放置一个“锚”(这不仅仅对链接有用！)。然后，当您有一个指向#nameofanchor的链接时，它会滚动到具有该名称的锚点。你可以这样做：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4475353|<a+id="top"></a>

<a+href="#top">Back+to+top</a>|code-block|syntax|javascript|4475354|下面是一个有效的jsfiddle：http://jsfiddle.net/qf0m9arp/1/|4475355|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/qf0m9arp/1/^0|9|3|1E|D|0|0|H|V|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@$9|11|A|12|1|13]]|E|$]]|$1|M|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|N|$O|$5|P|Q|R|E|$S|T]]]]

<p>What you would want to do is put an &quot;anchor&quot; at the top of the page, using an <code>&lt;a&gt;</code> tag (it's not JUST useful for links!). Then, when you have a link that goes to <code>#nameofanchor</code>, it scrolls to the anchor with that name. You'd do it like this:</p>
<pre><code>&lt;a id=&quot;top&quot;&gt;&lt;/a&gt;
&lt;!--content here--&gt;
&lt;a href=&quot;#top&quot;&gt;Back to top&lt;/a&gt;
</code></pre>
<p>Here is a working jsfiddle: <a href="http://jsfiddle.net/qf0m9arp/1/" rel="noreferrer">http://jsfiddle.net/qf0m9arp/1/</a></p>


blocks|key|4474672|text|利用<a>标记。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4474673|在您的网站顶部，放置一个具有指定名称的锚。|4474674|<a+name="top"></a>|code-block|syntax|javascript|4474675|然后你的“返回顶部”链接指向它。|4474676|<a+href="#top">back+to+top</a>|4474677|entityMap^0|2|3|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|D|@]|E|$]]|$1|O|3|P|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>Utilize the <code>&lt;a&gt;</code> tag.</p>

<p>At the top of your website, put an anchor with specified name.</p>

<pre><code>&lt;a name="top"&gt;&lt;/a&gt;
</code></pre>

<p>Then your "back to top" link points to it.</p>

<pre><code>&lt;a href="#top"&gt;back to top&lt;/a&gt;
</code></pre>


blocks|key|4475418|text|这是HTML的唯一方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475419|<body>
<a+name="top"></a>
foo+content
foo+bottom+of+page
<a+href="#top">Back+to+Top</a>
</body>|code-block|syntax|javascript|4475420|使用jquery和jscript还有相当多的其他选择，但它们提供了额外的效果。这真的取决于你要找的是什么。|4475421|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is the HTML only way:</p>

<pre><code>&lt;body&gt;
&lt;a name="top"&gt;&lt;/a&gt;
foo content
foo bottom of page
&lt;a href="#top"&gt;Back to Top&lt;/a&gt;
&lt;/body&gt;
</code></pre>

<p>There are quite a few other alternatives using jquery and jscript though which offer additional effects. It really just depends on what you are looking for.</p>


blocks|key|4474744|text|<a+id="topbutton"+href="#top">first+page+</a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4474745|基本上你要做的就是将“#top”替换为第一部分或你的页面的id，或者它可以是导航...任何id定位在页面的第一部分，然后尝试用css设置一些样式！|unstyled|4474746|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;a id="topbutton" href="#top"&gt;first page &lt;/a&gt;
</code></pre>

<p>Basically what you have to do is replace the
" #top" with the id of the first section or your page, or it could be the nav... Any id locate in the first part of the page and then try to set some style with css!</p>


blocks|key|4474837|text|要添加到现有答案中，可以通过使用JavaScript覆盖链接来避免影响网址。这仍然会将您带到没有JavaScript的页面顶部，但会将#附加到该URL。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4474838|<a+href="#"+onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()">Back+to+top</a>|code-block|syntax|javascript|4474839|entityMap^0|1V|1|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>To add to the existing answers, you can avoid affecting the URL by overriding the link with JavaScript. This will still take you to the top of the page without JavaScript, but will append <code>#</code> to the URL.</p>

<pre><code>&lt;a href="#" onclick="document.body.scrollTop=0;document.documentElement.scrollTop=0;event.preventDefault()"&gt;Back to top&lt;/a&gt;
</code></pre>


blocks|key|4474972|text|<a+href="#">Start+of+page</a>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4474973|“该链接的href值为"#"，根据定义，该值表示当前文档的开始。因此，无需担心设置目标锚点的正确方式...”|unstyled|4474974|Source|offset|length|4474975|entityMap|0|LINK|mutability|MUTABLE|url|http://jkorpela.fi/www/totop.html^0|0|0|0|6|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|F|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

<pre><code>&lt;a href=&quot;#&quot;&gt;Start of page&lt;/a&gt;
</code></pre>
<p>&quot;The link has the href value of &quot;#&quot;, which by definition means the start of the current document. Thus there is no need to worry about the correct way of setting up the destination anchor...&quot;</p>
<p><a href="http://jkorpela.fi/www/totop.html" rel="nofollow noreferrer">Source</a></p>


blocks|key|4474775|text|我像这样做了我的背靠背按钮|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474776|<li+class="nav-item"><a+class="nav-link+active"+href="#home">HOME</a></li>+++
++++<button+type="button"+class=+"btn+btn-light"+name="button"+style="float:+right;"><a+href="#top">Top</a></button>|code-block|syntax|javascript|4474777|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I did my back-to-top button like this   </p>

<pre><code>&lt;li class="nav-item"&gt;&lt;a class="nav-link active" href="#home"&gt;HOME&lt;/a&gt;&lt;/li&gt;   
    &lt;button type="button" class= "btn btn-light" name="button" style="float: right;"&gt;&lt;a href="#top"&gt;Top&lt;/a&gt;&lt;/button&gt;
</code></pre>


blocks|key|4474806|text|我使用了一个只有一个提交按钮的表单。将"action“属性指向需要导航到的元素的ID。只用"#top“就行了，不需要在样式表中定义ID：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474807|<form+action="#top">
++++<button+type="submit">Back+to+Top</button>
</form>|code-block|syntax|javascript|4474808|可能需要额外的几行代码，但这至少是一个按钮。我发现这是最简洁和最具描述性的方式。|4474809|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I used a form with a single submit button. Point the "action" attribute to the ID of the element that needs to be navigated to. Worked for me with just "#top" without needing to define an ID in my stylesheet:</p>

<pre><code>&lt;form action="#top"&gt;
    &lt;button type="submit"&gt;Back to Top&lt;/button&gt;
&lt;/form&gt;
</code></pre>

<p>Maybe a couple extra lines than is desirable but it's a button, at least. I find this the most concise and descriptive way to go about it.</p>


blocks|key|4475610|text|希望这对某些人有帮助！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4475611|<style>+html+{+scroll-behavior:+smooth;}+</style>
<a+id="top"></>

<a+href="#top">Back+to+top..</a>|code-block|syntax|javascript|4475612|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Hope this helps somebody!</p>

<pre><code>&lt;style&gt; html { scroll-behavior: smooth;} &lt;/style&gt;
&lt;a id="top"&gt;&lt;/&gt;
&lt;!--content here--&gt;
&lt;a href="#top"&gt;Back to top..&lt;/a&gt;

</code></pre>


blocks|key|4474892|text|这是我的解决方案，HTML+&+CSS只有一个返回顶部的按钮，也是我的第一篇文章。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474893|修复了页面顶部两行的标题，当滚动的第二行(带链接)移动到顶部时是固定的。链接为主页、另一页、后退、顶部|4474894|+<h1+class="center+italic+fixedheader">
++Some+Text+<span+class="small">-+That+describes+your+site+or+page</span>
++<br>
++<a+href="index.htm">&#127968;&nbsp;Home</a>+<a+href=
++"gen.htm">&#128106;&nbsp;Gen</a>+<a+href="#"
++++++onclick="history.go(-1);return+false;">&#128072;&nbsp;Back</a>+<a+href=
+++enter+code+here+++"#">&#128070;&nbsp;Top</a>
++</h1>

++++<style>
++++.fixedheader+{
++++margin:+auto;
++++overflow:+hidden;
++++background-color:+inherit;
++++position:+sticky;
++++top:+-1.25em;
++++width:+100%25;
++++border:+.65em+hidden+inherit;
++++/*+white+solid+border+hides+any+bleed+through+at+top+and+lowers+text+*/
++++}
++++</style>|code-block|syntax|javascript|4474895|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>This is my solution, HTML &amp; CSS only for a back to top button, also my first post.</p>

<p>Fixed header of two lines at top of page, when scrolled 2nd line (with links) moves to top and is fixed. Links are Home, another page, Back, Top</p>

<pre><code> &lt;h1 class="center italic fixedheader"&gt;
  Some Text &lt;span class="small"&gt;- That describes your site or page&lt;/span&gt;
  &lt;br&gt;
  &lt;a href="index.htm"&gt;&amp;#127968;&amp;nbsp;Home&lt;/a&gt; &lt;a href=
  "gen.htm"&gt;&amp;#128106;&amp;nbsp;Gen&lt;/a&gt; &lt;a href="#"
      onclick="history.go(-1);return false;"&gt;&amp;#128072;&amp;nbsp;Back&lt;/a&gt; &lt;a href=
   enter code here   "#"&gt;&amp;#128070;&amp;nbsp;Top&lt;/a&gt;
  &lt;/h1&gt;

    &lt;style&gt;
    .fixedheader {
    margin: auto;
    overflow: hidden;
    background-color: inherit;
    position: sticky;
    top: -1.25em;
    width: 100%;
    border: .65em hidden inherit;
    /* white solid border hides any bleed through at top and lowers text */
    }
    &lt;/style&gt;
</code></pre>


blocks|key|4474996|text|我们可以像这样将链接指向"#“。这样，除了“返回顶部”链接之外，我们将不需要添加空白锚点标记或更改任何内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4474997|<a+href="#">Back+To+Top</a>|code-block|syntax|javascript|4474998|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>We can point the link to &quot;#&quot; like this. This way, we won't need to add a blank anchor tag or change anything apart from our &quot;Back To Top&quot; link.</p>
<pre><code>&lt;a href=&quot;#&quot;&gt;Back To Top&lt;/a&gt;
</code></pre>


blocks|key|4475752|text|你可以使用css和html制作back+to+top按钮，语法如下：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4475753|<a+href="#idOfElement">+back+to+top</a>|code-block|syntax|javascript|4475754|对于示例:+id+=标题|4475755|<a+href="#heading">back+to+top</a>|4475756|当你点击back+to+top时，它会在标题id处滚动屏幕|4475757|*提示：-请在下面提到在css中平滑滚动的代码。|4475758|html{
scroll-behavior:+smooth;
}|4475759|entityMap^0|F|B|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|T|5|H|7|14|8|@]|D|@]|E|$I|J]]|$1|U|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|V|$]]

<p>You can make <code>back to top</code> button using css and html using this syntax:</p>
<pre><code>&lt;a href=&quot;#idOfElement&quot;&gt; back to top&lt;/a&gt;
</code></pre>
<p>for ex:
id = heading</p>
<pre><code>&lt;a href=&quot;#heading&quot;&gt;back to top&lt;/a&gt;
</code></pre>
<p>when you click on back to top it scroll the screen at the heading id</p>
<p>*Tips:- please mention below code for smooth scrolling in css.</p>
<pre><code>html{
scroll-behavior: smooth;
}
</code></pre>


<p>I'm trying to do a <code>back to top</code> button but to scroll down and up to a certain point on the page. For instance you have a long text and you want to bring the user to the next paragraph by simply having them to click on a link... I've done it in the past but I can't remember how I did it for the life of me...</p>


How to make a back-to-top button using CSS and HTML only?

我正在尝试做一个back to top按钮，但是要向上和向下滚动到页面上的某个点。例如，你有一个很长的文本，你想通过简单地让用户点击一个链接来把他们带到下一个段落……我以前做过，但我不记得我是怎么做的……

问如何仅使用CSS和HTML制作返回顶部的按钮？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅使用CSS和HTML制作返回顶部的按钮？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何仅使用CSS和HTML制作返回顶部的按钮？
EN