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

网页回到顶部实现方法

作者: 爱佳佳真是太好了 | 来源:发表于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;

});

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



相关文章

  • 网页回到顶部实现方法

    js获取页面元素距离浏览器工作区顶端的距离 网页被卷起来的高度/宽度(即浏览器滚动条滚动后隐藏的页面内容高度) (...

  • 返回顶部的几种方法

    有时候网页太长,我们想要回到网页顶部很麻烦。 这时候我们需要一个返回顶部的效果。 要实现返回顶部,有很多方法。 1...

  • js实现跳转页面指定位置的几种方法

    一.scrollBy()实现回到顶部 二.scrollTop()方法实现滚动到顶部 三.window.locati...

  • 代码小积累

    1, 点击 点击链接后不会回到网页顶部 点击 点击后会回到网面顶部 2,清除浮动(clearfix hack)...

  • 回到顶部的几种实现方法

    【1】使用默认链接锚点 添加一个a链接,设置a链接的href属性值为"#top"即可实现 【2】href指向特定的...

  • vue router跳转后网页回到顶部方法

    全部页面的话就在mian.js中设置或者 单独的某个页面就在页面加载之前设置 单独设置需变为this.$route...

  • js实现回到顶部按钮

    回到顶部按钮的实现基本思想很简单,就是修改页面的scrollTop,难点就是去计算scrollTop实现回到顶部按...

  • 用Axure制作回到顶部效果

    用Axure制作回到顶部效果 浏览的网页内容较多需要“瀑布式”浏览时,一个“回到顶部”的操作能带给用户良好的体验。...

  • vue下返回顶部功能实现

    vue下返回顶部功能实现 Vue中点击按钮回到顶部(滚动效果) vue中回到顶部 vue滚动到一定位置显示置顶元素...

  • UIWebView加载网页点击回到顶部

    通常用UIWebView加载网页,有时候需要点击一个按钮,或者页面的某个部位,使页面自动滚动到顶部,但是UIWeb...

网友评论

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

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