scrollTop以及页面回到顶部1.实现有许多种方法，原理是监听页面高度实现滚动。

43 阅读 0 评论 29 点赞

我是靠谱客的博主精明星月，最近开发中收集的这篇文章主要介绍scrollTop以及页面回到顶部1.实现有许多种方法，原理是监听页面高度实现滚动。，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.实现有许多种方法，原理是监听页面高度实现滚动。

一、使用锚点

1）使用默认链接锚点，设置a链接的href属性值为"#top"即可实现
<div><a href=" ">返回顶部</a ></div>

2）href指向特定的id
<div id=“element1”>元素1</div>
<a href=“#element1”>回到元素1</a >

二、scrollTop属性:

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

document.body.scrollTop = document.documentElement.scrollTop = 0

三、scrollTo(0,0)方法:

参数为坐标点，（x,y）—坐标点
坐标x和y指定的点位于显示区域的左上角

四、scrollBy(dx,dy)方法：参数为距离 dx—表示水平距离，dy-表示垂直距离
var top = document.body.scrollTop || document.documentElement.scrollTop
scrollBy(0,-top)

参考文章：JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）_zh_rey的博客-CSDN博客_js offsettop这里是javascript中制作滚动代码的常用属性页可见区域宽： document.body.clientWidth;网页可见区域高： document.body.clientHeight;window.innerHeight;网页可见区域宽： document.body.offsetWidth (包括边线的宽);网页可见区域高： document.body.offhttps://blog.csdn.net/zh_rey/article/details/78967174

2.js实现，动态返回顶部效果

<style>
    p {
        width: 100px;
        height: 50px;
        background: tomato;
    }
    div {
        width: 100px;
        height: 30px;
        background: yellowgreen;
        color: white;
        text-align: center;
        line-height: 30px;
        position: fixed; /*使用固定定位*/
        bottom: 50px;
        right: 50px;
    }
</style>
    
<p>1</p>
<p>2</p>
   .
   .
   .
<p id="special">12</p>
   .
   .
   .
<p>40</p>
<div id="toTop">back to top</div>

<script>
    var toTop = document.querySelector("#toTop");    
    toTop.style.display = "none";// 一开始div隐藏  
    window.addEventListener("scroll", scrollHandler);// 然后给window加事件监听，滚动条大于某个值时，div出现
    function scrollHandler(e) {        
        var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容写法，获取当前页面y轴的滚动距离
        if (distanceY > 50) {
            toTop.style.display = "block";
        } else {
            toTop.style.display = "none";
        }
    }
    // 然后给div添加点击事件，用计时器interval来循环，步长为5，scrollTop依次减5，时间每50ms循环一次，直到scrollTop为0清除计时器
    toTop.addEventListener("click", clickHandler);
    function clickHandler(e) {
        let timer = setInterval(function () {
            var distanceY = document.documentElement.scrollTop || document.body.scrollTop;//兼容
            if (distanceY == 0){
                clearInterval(timer);
                return;
            } 
            var speed = Math.ceil(distanceY/16);//speed这个值从高变低，那么scrollTop就减得从快到慢，上回到顶部的速度就先快后慢
            document.documentElement.scrollTop=distanceY-speed;
            // document.documentElement.scrollTop=distanceY-5;//如果给速度一个确定的值，那回到顶部的就匀速
        }, 16);
    }

</script>

思路：为window绑定scroll事件，监听页面滚动距离，当超过一屏高度时，显示返回顶部的按钮。

为按钮绑定点击事件，返回顶部的方法就是获取页面滚动的距离，然后计算步长，这里采用滚动距离除以16的方式，滚动速度由快到慢。这里使用定时器控制滚动的频率，建议设置较小一点的值，如果时间间隔过大会有‘跳帧’的感觉。
转载：