【原创】 JQ实现返回顶部
栏目:Other  作者:隆航  阅读:(1586)

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

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)
})

然后贴上图片:

toTop.png

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


上一篇: IP库补丁...


侯礼兴博客
#108

   侯礼兴博客     2015-11-04 14:06    Win XP      广东省东莞市

2.3写详细点好吗?在哪个文件添加·· 我是小白!

隆航

   隆航     11-04 14:21    回复 @侯礼兴博客 中说到:

2是在my.css添加,3的话在foot文件加或者在my.js都可以的。

昵称
邮箱
域名
  记住 通知博主
验证码

  程序相关

站点版本:青春博客-V 2.1.0

开源版本:青春博客-Beta v2.0

 下载  在线支付  在线工具  在线音乐

  随机文章