如何使用CSS和HTML制作一个回到顶部的按钮？

Question

我正在尝试做的有点像back to top按钮,但向下滚动到页面上的某个点!比如说你有一个很长的文字,你想让用户点击一个链接就可以把用户带到下一段...我过去做过但我不记得我是怎么做的我的生活......

Answer 1

你想要做的是在页面顶部放置一个"锚点",使用一个<a>标签(它对链接不是很有用!).然后,当您有一个链接时#nameofanchor,它会滚动到具有该名称的锚点.你这样做:

<a name="top"></a>
<!--content here-->
<a href="#top">Back to top</a>

这是一个工作的jsfiddle:http://jsfiddle.net/qf0m9arp/1/

请注意,在HTML5中,不推荐使用`<a>`标记的`name`属性,而`id`属性应该用于此目的. (6认同)
非常好，简单。相比之下，[w3schools的方法]（https://www.w3schools.com/howto/howto_js_scroll_to_top.asp）令人难以置信。 (2认同)

Answer 2

<a href="#">Back to top</a>

“该链接的 href 值为“#”，根据定义，它表示当前文档的开始。因此无需担心设置目标锚点的正确方法......”

Answer 3

使用<a>标签。

在您网站的顶部，放置一个具有指定名称的锚点。

<a name="top"></a>

然后您的“返回顶部”链接指向它。

<a href="#top">back to top</a>

Answer 4

这是 HTML 唯一的方式：

<body>
<a name="top"></a>
foo content
foo bottom of page
<a href="#top">Back to Top</a>
</body>

还有很多其他使用 jquery 和 jscript 的替代方案，尽管它们提供了额外的效果。这真的只取决于你在寻找什么。