js实现返回顶部功能的解决方案

转载 (原文地址) 15036049068 随笔 js 95阅读 2019-02-20 14:18:19 举报

很多网站上都有返回顶部的效果,主要有如下几种解决方案。

1、纯js,无动画版本

2、纯js,带动画版本
生硬版:
复制代码

复制代码
流畅版:
复制代码

复制代码

3、jQuery,带动画版本
首先需要在顶部添加如下html元素:

<span style="font-size:14px"><p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p></span>
其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以实现返回顶部的效果了。
要想让返回顶部的图片显示在右侧,还需要一些css样式,如下:

复制代码

复制代码

上面样式中的背景图片是雪碧图,可以使用两个单独的返回顶部图片

有了html和样式,我们还需要用js控制返回顶部按钮,在页面滚动时渐隐渐现返回顶部按钮。

复制代码

复制代码
这样就可以了。
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复