页面滚动到指定位置的两种方案

最新推荐文章于 2024-05-17 11:09:20 发布

恶魔程

最新推荐文章于 2024-05-17 11:09:20 发布

阅读量4.8k

点赞数 5

文章标签： scrollTo javascript

本文链接：https://blog.csdn.net/weixin_45511233/article/details/107340950

版权

页面滚动到指定位置的两种方案

一. 简单方案 (scrollTo)

1. 前置知识

Element.scrollTo()方法可以使界面滚动到给定元素的指定坐标位置

1.1 语法

element.scrollTo( X , Y )

X 是期望滚动到位置水平轴上距元素左上角的像素
Y 是期望滚动到位置竖直轴上距元素左上角的像素

element.scrollTo( options )

option 是一个ScrollToOptions对象

1.2 关于 `ScrollToOptions` 对象

1.2.1 `ScrollToOptions` 对象可作为以下方法的参数

Window.scroll()
Window.scrollBy()
Window.scrollTo()
Element.scroll()
Element.scrollBy()
Element.scrollTo()

1.2.2 `ScrollToOptions` 对象的属性

ScrollToOptions.top 指定 window 或元素 Y 轴方向滚动的像素数

ScrollToOptions.left 指定 window 或元素 X 轴方向滚动的像素数

ScrollToOptions.behavior 指定滚动是否应该平滑进行，还是立即跳到指定位置。该属性实际上定义在 ScrollOptions 字典上，它通过 ScrollToOptions 实现

behavior 有两个值, 'smooth' 平滑移动到目标位置, 'auto' 瞬移到目标位置

2. 代码

JS

var elevator = document.getElementsByClassName("elevator")[0],
    var goBack = document.querySelector(".elevator>ul>li>a")
console.dir(elevator)
window.onscroll = function(e) {
    var scrollTop = document.body.scrollTop || document.documentElement.scrollTop
    if (scrollTop >= 500) {
        elevator.style.display = "block"
    } else {
        elevator.style.display = "none"
    }
    goBack.onclick = () => {
        window.scrollTo({
            top: 0,
            left: 0,
            behavior: 'smooth' //重点在此
        })
    }
}

HTML

<body>
    <div class="container">
        <h1>Title</h1>
        <p>Lorem</p>
        <div class="elevator">
            <ul>
                <li><a href="javascript:;">返回顶层</a></li>
            </ul>
        </div>
    </div>
</body>

CSS

.container {
    width: 800px;
    margin: 0 auto;
    position: relative;
}

.elevator {
    position: fixed;
    right: 0;
    top: 400px;
    display: block;
}

二. 复杂方案 (scrollBy)

1. 核心思路

用定时器功能按周期向目标方向挪动一定距离, 在视觉上呈现出滚动的效果

2. 代码

JS

window.onscroll = function() {
    scrollTop = document.documentElement.scrollTop || document.body.scrollTop
    if (scrollTop > 500) {
        toTop.style.display = "block"
    } else {
        toTop.style.display = "none "
    }
}
toTop.onclick = function() {
    var dist = scrollTop
    var steps = 50
    var dura = 500
    var step = dist / steps
    var interval = dura / steps
    var timer = setInterval(() => {
        window.scrollBy(0, -step)
        steps--
        if (steps == 0) {
            clearInterval(timer)
            steps = 50
        }
    }, interval);
}

注意: 为了考虑到各种机型性能和用户体验, 间隔时间不宜小于10毫秒

HTML

<body>
        <div id="d1">
                <p>Lorem</p>
            </div>
        <div id="toTop">回到顶部</div>    
</body>

CSS

#d1 {
    width: 200px;
}

#toTop {
    position: fixed;
    top: 0;
    right: 0;
}

恶魔程

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
页面滚动到指定位置的两种方案

页面滚动到指定位置的两种方案一. 简单方案 (scrollTo)1. 前置知识Element.scrollTo()方法可以使界面滚动到给定元素的指定坐标位置1.1 语法element.scrollTo( X , Y )X 是期望滚动到位置水平轴上距元素左上角的像素Y 是期望滚动到位置竖直轴上距元素左上角的像素element.scrollTo( options )option 是一个ScrollToOptions对象1.2 关于 ScrollToOptions 对象1.2.
复制链接

扫一扫