网页回到顶部实现方法

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;

});


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



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Window和document对象的区别 window对象window对象表示浏览器中打开的窗口window对象是...
    FConfidence阅读 2,255评论 0 5
  • 一.首先介绍常用的属性: HTML精确定位:scrollLeft,scrollWidth,clientWidth,...
    silingling阅读 3,095评论 0 1
  • 1.第一种方式:锚链接 优点:简单快速,没有兼容性问题 缺点: 视觉上不够直观,用户体验不太好 2.js的方式: ...
    love2013阅读 809评论 0 0
  • 一、JS前言 (1)认识JS 也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HT...
    凛0_0阅读 2,807评论 0 8
  • 如果不调用,那么64位系统设置局部变量的时候,将局部参数压入栈,不会像8086一样,修改sp的值,调用的时候直接使...
    mkb2阅读 404评论 0 2