跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

如何用JS轻松实现页面回到顶部？五种方法带你飞！

林译川
林译川
• 👁 1人浏览过

文章导读

大家好，我是林译川。今天我们来聊聊一个看似简单，实则蕴含着编程思维的小技巧——如何用JavaScript实现页面回到顶部。这不仅仅是一个功能，更是一个理解DOM操作和事件处理的好机会。接下来，我会用五种不同的方法来展示如何实现这个功能，并分享一些实战经验和心得体会。

回到顶部五种写法详解

首先，我们来看看五种实现回到顶部的方法。

1. 锚点

使用锚点链接是一种简单直接的方法。在页面顶部放置一个锚点，然后在页面下方添加一个链接指向这个锚点。点击链接，页面就会滚动到锚点所在的位置。

2. scrollTop属性

scrollTop属性表示元素被垂直滚动的像素数。通过修改这个属性的值，我们可以控制元素的滚动位置。将scrollTop设置为0，就可以实现回到顶部的效果。

test.onclick = function(){
    document.body.scrollTop = document.documentElement.scrollTop = 0;
}

3. scrollTo()方法

scrollTo(x, y)方法可以将文档滚动到指定的坐标。将坐标设置为(0, 0)，就可以实现回到顶部的效果。

test.onclick = function(){
    scrollTo(0, 0);
}

4. scrollBy()方法

scrollBy(x, y)方法可以滚动文档，x和y指定滚动的相对量。将y设置为当前页面的滚动长度，并逆向滚动，就可以实现回到顶部的效果。

test.onclick = function(){
    var top = document.body.scrollTop || document.documentElement.scrollTop;
    scrollBy(0, -top);
}

5. scrollIntoView()方法

scrollIntoView()方法可以将元素滚动到可见区域。通过设置参数为true，可以使元素的顶部与可见区域的顶部对齐。

test.onclick = function(){
    target.scrollIntoView();
}

增强功能：显示和动画

除了基本的实现，我们还可以对回到顶部的功能进行增强。

1. 显示增强

使用CSS可以创建一个可视化的回到顶部按钮，并且可以通过hover效果显示文字。

.box{
    position:fixed;
    right:10px;
    bottom: 10px;
    height:30px;
    width: 50px;
    text-align:center;
    padding-top:20px;
    background-color: lightblue;
    border-radius: 20%;
    overflow: hidden;
}
.box:hover:before{
    top:50%
}
.box:hover .box-in{
    visibility: hidden;
}
.box:before{
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translate(-50%,-50%);
    content:'回到顶部';
    width: 40px;
    color:peru;
    font-weight:bold;
}
.box-in{
    visibility: visible;
    display:inline-block;
    height:20px;
    width: 20px;
    border: 3px solid black;
    border-color: white transparent transparent white;
    transform:rotate(45deg);
}

2. 动画增强

为了使回到顶部的效果更加平滑，我们可以添加动画效果。这里我使用了requestAnimationFrame来实现平滑的滚动动画。

var timer = null;
box.onclick = function(){
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn(){
        var oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if(oTop > 0){
            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
            timer = requestAnimationFrame(fn);
        }else{
            cancelAnimationFrame(timer);
        }
    });
}

小结与拓展

通过以上五种方法，我们可以轻松实现页面回到顶部的功能。同时，我们还可以通过CSS和JavaScript对其进行增强，使其更加美观和实用。这不仅仅是一个技术点的学习，更是一个理解编程思维和设计思想的好机会。

我是林译川，如果你对编程技术有任何疑问，欢迎访问「新派编程网」（www.xjpbg.com）了解更多内容。

相关文章