我们经常会在浏览网页时,在比较长的页面上翻页之后,一旦想回到顶部去点导航栏或者想搜索些什么,可能需要用鼠标滚轮滚动多次才能回到顶部。比较方便的方法是在页面上浮动一个“回到顶部”的按钮,不管你在页面上哪个位置,点击它就能回到页面最顶部的位置了。

常规实现回到顶部的方法

最简单的方法无非是利用 HTML 里的锚点,给“回到顶部”按钮设置一个“#”的超链接,点击一下,就能很方便的回到顶部了。

带滚动效果的回到顶部

如果想点击“回到顶部”之后,页面能缓缓地回到顶部的位置,就需要给它设置 JavaScript 代码了,并且我们也能实现在页面一开始的第一屏不显示“回到顶部”按钮,只在页面滚动差不多第二页的时候才出现。

首先就不能把这个按钮设置成锚点了:

该按钮是这样一个图片,所以设置它的 CSS 样式:

logo

JavaScript 代码:

结论

利用 JavaScript,就可以制作出一个有很好的视觉效果的“回到顶部”了,比锚点那种直接的页面内跳转会显得更好。
BackTop

发表评论

电子邮件地址不会被公开。 必填项已用*标注