jQuery返回顶部滑动跳转效果

我们在浏览博客的时候,有时候文章太长,要返回顶部要鼠标点半天,这时候就显示出主题带个返回顶部功能的好处了,下面来说说简单实现返回顶部功能的方法!
1、在网页body结束前添加:

1
<div id="back-to-top"><a href="#top" title="Go To Top"><span></span></a></div>

2、新建或者在主题的JS文件中添加:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//GoToTop
$(document).ready(function(){
  //首先将#back-to-top隐藏
  $("#back-to-top").hide();
  //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
  $(function () {
    $(window).scroll(function(){
    if ($(window).scrollTop()>100){
    $("#back-to-top").fadeIn(1500); }
    else
    {
    $("#back-to-top").fadeOut(1500);
    }
    });
    //当点击跳转链接后,回到页面顶部位置
    $("#back-to-top").click(function(){
    $('body,html').animate({scrollTop:0},1000);
    return false;
    });
    });
    });

3、简单CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 /* GoTop */
  #back-to-top{
    position:fixed;
    bottom:100px;
    right:40px;
   
  }
  #back-to-top a{
    text-align:center;
    text-decoration:none;
    color:#d1d1d1;
    display:block;
    width:50px;
  }
  #back-to-top a:hover{color:#979797;}
  #back-to-top a span{
    background:#d1d1d1;
    border-radius:6px;
    display:block;
    height:50px;
    width:50px;
    background:url(img/gotop.png) no-repeat 0 0;}
  #back-to-top a:hover span{background:url(img/gotop.png) no-repeat 0 -50px;}

4、主题使用图片:当然这种没特色的图片,大家可以在网上能找到很多自己喜欢的换上。

给我留言