DDR爱好者之家

jQuery实现返回顶部功能适合不支持js的浏览器
站长资源 2025/1/20 佚名
57 1538
DDR爱好者之家 Design By 杰米

很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现返回顶部按钮。

首先需要在顶部添加如下html元素：

<p id="back-to-top"><a href="#top" rel="external nofollow" ><span></span>返回顶部</a></p>

其中a标签指向锚点top，可以在顶部防止一个<a name="top"></a>的锚点，这样在浏览器不支持js时也可以实现返回顶部的效果了。

要想让返回顶部的图片显示在右侧，还需要一些css样式，如下：

/*returnTop*/ 
p#back-to-top{ 
position:fixed; 
display:none; 
bottom:100px; 
right:80px; 
} 
p#back-to-top a{ 
text-align:center; 
text-decoration:none; 
color:#d1d1d1; 
display:block; 
width:64px; 
/*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ 
-moz-transition:color 1s; 
-webkit-transition:color 1s; 
-o-transition:color 1s; 
} 
p#back-to-top a:hover{ 
color:#979797; 
} 
p#back-to-top a span{ 
background:transparent url(/static/imgs/sprite.png"//img.jbzj.com/file_images/article/201408/201408191041252.gif" alt="" />


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





<script src="/UploadFiles/2021-04-02/jquery-1.7.2.min.js">


这样就可以了。


注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米