美文网首页
网页回到顶部实现方法

网页回到顶部实现方法

作者: 爱佳佳真是太好了 | 来源:发表于2017-05-23 09:29 被阅读0次

    js获取页面元素距离浏览器工作区顶端的距离

    网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度)

    (javascript)document.documentElement.scrollTop//firefox

    (javascript)document.documentElement.scrollLeft//firefox

    (javascript)document.body.scrollTop //IE

    (javascript)document.body.scrollLeft //IE

    (jqurey)$(window).scrollTop()

    (jqurey)$(window).scrollLeft()

    网页实时滚动的方法

    $(window).scroll()

    这里是实时控制回到顶部按钮显示隐藏的事件

    $(window).scroll(function () {

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

    $('#gotoTop').css('display','block');

    }else{

    $('#gotoTop').css('display','none');

    }

    });

    这里是回到顶部按钮点击事件

    $('#gotoTop').click(function () {

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

    return false;

    });

    当然还有锚点的方法 但直接跳转太过僵硬。



    相关文章

      网友评论

          本文标题:网页回到顶部实现方法

          本文链接:https://www.haomeiwen.com/subject/xcswxxtx.html