JQ实现返回顶部 - 闲言碎语

[ 原创 ] JQ实现返回顶部

栏目：笔记作者：teemo 阅读：（8568）更新于：2015-11-04 12:32

上次一博友问题怎么添加返回顶部，这里的话我就把代码贴出来。

1.在head或者foot中添加一个返回顶部的div

<div id="toTop" class="hidden-xs" style="display: none;">返回顶部</div>

2.在CSS中添加对应的样式：

/*返回顶部*/
#toTop {position: fixed;right: 20px;bottom: 25px;z-index: 12;display: none;width: 47px;height: 47px;background: url(../Img/toTop.png) no-repeat;text-align: center;text-indent: -9999px;cursor: pointer;}

3.在公用js中添加如下JQ：

//返回顶部
$(window).scroll(function() {
if ($(this).scrollTop() != 0) {
$("#toTop").fadeIn()
} else {
$("#toTop").fadeOut()
}
});
$("#toTop").click(function() {
$("body,html").animate({
scrollTop: 0
}, 800)
})

然后贴上图片：

注：因为bootstrap依赖JQ1.8以上，所以这里只需要放在引入的JQ之后执行就行。

非特殊说明，本文版权归青春博客所有，转载请注明出处.

本文标题：JQ实现返回顶部

本文网址：.

本文标签：返回顶部

上一篇： IP库补丁...

下一篇： ThinkPHP动态配置系统参数...

[ 原创 ] JQ实现返回顶部

我的标签

随机文章

程序相关

程序统计

推荐文章

资源分享