JS 滚动屏幕至顶端

最新推荐文章于 2024-05-07 01:12:52 发布

Ice_cream_g

最新推荐文章于 2024-05-07 01:12:52 发布

阅读量3.8k

点赞数 1

分类专栏： JS记录文章标签： js

本文链接：https://blog.csdn.net/qq_41501817/article/details/112466480

版权

JS记录专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JS 滚动屏幕至顶端

JS滚动屏幕到顶端的几种方法

<a href="#"></a>与带id的元素绑定使用
document.documentElement.scrollTop = 0 / document.body.scrollTop = 0
scrollTo(0,0) 一般用于相对于整个页面来说
scrollBy(x,y) 一般用于相当于当前元素的滚动，可以传入当前元素相对于顶端的值，即document.documentElement.scrollTop
scrollIntoView()和要跳转的元素绑定，使元素进入视口

<body style="height:2000px;">
    <div id="target"></div>
<div id="box" class="box">
<div class="box-in"></div>
</div> 
<script>
var box = document.getElementById("box");
box.addEventListener("click",function(){
    console.log(1)
    target.scrollIntoView(true);
})
</script>

我的实现

$('.toTop').on({
    click: function () {
        $("html").animate({
            scrollTop: 0
        },400)
    }
})

兼容性问题(此处应用了大佬的文章，链接在下面)

document.body.scrollTop在当前文档处于“怪异模式（Quirks mode）”，当HTML文档没有声明DOCTYPE的时候，浏览器可以识别。
document.documentElement.scrollTop在当前文档处于“标准模式（Standards mode）”或者“准标准模式(almost standards mode)”（即上段代码中mode = “CSS1Compat”）使用，当HTML文档正确声明DOCTYPE的时候，就可能会启用标准模式，是否启用取决于浏览器本身。
window.pageYOffset最为特殊，并不取决于文档的渲染模式，而是取决于浏览器本身是否存在此属性。

浏览器兼容性问题

IE6/7/8：没有doctype声明的html文档使用 document.body.scrollTop，否则使用document.documentElement.scrollTop。这些版本的浏览器中window.pageYOffset属性是undefined，因此无效。
Google Chrome，Firefox，IE9+: document.body.scrollTop 和 document.documentElement.scrollTop 使用方式同上，但window.pageYOffset 无论doctype是否声明，浏览器都可以识别。（早前的chrome只能识别document.body，也就是documentElement对应body标签，自用chrome更新63以上版本以后正确doctype文档声明document.body.scrollTop恒为0，document.documentElement.scrollTop正常，chrome也没有早前那样特立独行了）。
Safari: 浏览器特殊，目前只有window.pageYOffset有效。

完整代码

var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
 
var x = supportPageOffset ? window.pageXOffset : isCSS1Compat ? document.documentElement.scrollLeft : document.body.scrollLeft;
var y = supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;

终极代码

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;

https://blog.csdn.net/a592024343/article/details/101142582

Ice_cream_g

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
JS 滚动屏幕至顶端

JS 滚动屏幕至顶端JS滚动屏幕到顶端的几种方法<a href="#"></a>与带id的元素绑定使用document.documentElement.scrollTop = 0 / document.body.scrollTop = 0scrollTo(0,0) 一般用于相对于整个页面来说scrollBy(x,y) 一般用于相当于当前元素的滚动，可以传入当前元素相对于顶端的值，即document.documentElement.scrollTopscrollIn
复制链接

扫一扫