一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

js实现返回顶部效果

时间:2017-06-14 编辑:简简单单 来源:一聚教程网

 

 代码如下 复制代码

JS点击按钮到页面最底部/返回页面顶部代码

 #back-to-top{ position: fixed; bottom: 50px; right: 10%; }

 返回顶部

 

 $(document).ready(function(){

  //首先将#back-to-top隐藏

  $("#back-to-top").hide();

  //当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失

  $(function () {

    $(window).scroll(function(){

    if ($(window).scrollTop()>100){

    $("#back-to-top").fadeIn(100);

    }

    else

    {

    $("#back-to-top").fadeOut(100);

    }

    });

    //当点击跳转链接后,回到页面顶部位置

    $("#back-to-top").click(function(){

    $('body,html').animate({scrollTop:0},"speed");

    return false;

    });

    });

    });

 

 

热门栏目