jQuery回到顶部的代码

网络编程 2024/11/18 佚名

3 1 2

在一些网站上，我们经常见到返回顶部的效果，本文给大家介绍基于jquery如何实现返回顶部效果。感兴趣的朋友跟着小编一起看下实现代码吧。

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

<p id="back-to-top"><a href="#top"><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"text-align: center">   
有了html和样式，我们还需要用js控制返回顶部按钮，在页面滚动时渐隐渐现返回顶部按钮。


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

这样就可以了。
注意在载入页面后需要向下拖动一点滚动条才可以看到返回顶部的效果图。
下面在给大家分享一段jquery回到顶部代码
1. 页面内容较多， 从底部超链接 点击回到页面顶部


// 回到顶部
var $top = $('<a class="doc-gotop" href="javascript:;">TOP</a>')
.on('click', function () {
$(window).scrollTop(0);
return false;
});
$('body').append($top);