代码实现给网站添加返回顶部功能

概述代码实现给网站添加返回顶部功能，瀑布流风格的网站开始流行之后，很多网站都出现了一个回到顶部的功能，对于瀑布流布局的网站来讲，这可以说是必须要有的

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

代码实现给网站添加返回顶部功能，瀑布流风格的网站开始流行之后，很多网站都出现了一个回到顶部的功能，对于瀑布流布局的网站来讲，这可以说是必须要有的一个功能，因为网站下拉了很长之后，需要返回顶部的时候，如果拖着滚动条去拉，那种麻烦相信大家都体验过。

对于非瀑布流网站来说，增加这种效果必要性其实不大，除非你的网站上文章很长，用户需要看好几屏才能看完。需不需要是基于用户体验上的考虑，咱在这里先按下不说，下面来看一下怎么通过一段 JavaScript 代码很简单的给网站添加一个回到顶部的按钮吧。首先把这段代码添加到网站的 JavaScript 文件或者直接添加到 footer.PHP 文件中。

jquery(document).ready(function($){

if ($(window).scrolltop() != "0")

$(".scroll-to-top").fadeIn(1200) //如果距离顶部的距离不为0，显示.scroll-to-top

var scrolldiv = $(".scroll-to-top");

$(window).scroll(function()

{

if ($(window).scrolltop() == "0")

$(scrolldiv).fadeOut(350)//如果距离顶部的距离为0，隐藏scrolldiv

else

$(scrolldiv).fadeIn(1200)//其他情况下，显示scrolldiv

});

$(".scroll-to-top").click(function(){

$("HTML,body").animate({

scrolltop: 0 //点击按钮，滚动回到顶部

},600)

})

 

});

然后是 CSS 代码

.scroll-to-top {

display: none;

wIDth: 70px;

height: 32px;

line-height: 32px;

color: #fff;

text-align: center;

background-color: #333;

Box-shadow: 0 1px 3px rgba(0,0.2);

cursor: pointer;

bottom: 2%;

position: fixed;

right: 15px;

z-index: 999;

}

.scroll-to-top:hover {

opacity: .8;

}

最后，把下面的一段代码加到 footer.PHP 文件里即可。

<div >返回顶部</div>

只有这几段代码，回到顶部的功能就添加完毕了，测试了一下，效果非常好，其实用户体验和前端设计很多地方拼得就是细节，细节做到了，用户用着爽了，用户体验自然就好了。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的代码实现给网站添加返回顶部功能全部内容，希望文章能够帮你解决代码实现给网站添加返回顶部功能所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。