基于Javascript实现返回顶部按钮

下面是“基于JavaScript实现返回顶部按钮”的完整攻略。

下面是“基于JavaScript实现返回顶部按钮”的完整攻略。

一、先了解什么是返回顶部按钮

返回顶部按钮是指网站页面上的一个链接按钮，当网页向下滚动一定程度时，点击该按钮可以使网页返回顶部。返回顶部按钮可以方便用户快速返回到网页的最顶部，提高用户使用网站的体验度。

二、实现方法

1. 设置html结构和CSS样式

在页面的合适位置增加一个“返回顶部”按钮的html结构，通过CSS设置按钮的位置、样式等特性。

<a href="#" id="back-to-top-btn">返回顶部</a>

#back-to-top-btn{
    display: none; //默认隐藏
    width: 50px;
    height: 50px;
    line-height: 50px;
    position: fixed;
    right: 50px;
    bottom: 50px;
    background-color: #FFA500;
    color: #fff;
    text-align: center;
}
#back-to-top-btn:hover{
    background-color: #FF8C00; //鼠标移上去时颜色变亮
}

2. 编写JavaScript代码

(1) 获取页面中滚动条的位置

const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

(2) 监听页面的滚动事件，控制“返回顶部”按钮的显示和隐藏

const backToTopBtn = document.getElementById("back-to-top-btn");
window.onscroll = function() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if(scrollTop > 200){
        backToTopBtn.style.display = "block";
    }else{
        backToTopBtn.style.display = "none";
    }
}

(3) 点击“返回顶部”按钮时，将页面滚动到顶部位置

backToTopBtn.onclick = function() {
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    const speed = Math.floor(scrollTop / 10);
    document.documentElement.scrollTop = document.body.scrollTop = scrollTop - speed;
    if(scrollTop === 0) clearInterval(timer);
}

3. 测试效果

将代码复制到html文件中，保存后在浏览器中打开查看效果。

三、示例说明

1. 使用jQuery库实现返回顶部按钮

jQuery库可以简化JavaScript代码的书写，下面是通过使用jQuery库实现返回顶部按钮的示例代码。

<a href="#" id="back-to-top" style="display:none;">返回顶部</a>

$(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop()>200){
            $("#back-to-top").fadeIn();
        }else{
            $("#back-to-top").fadeOut();
        }
    });
    $("#back-to-top").click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
});

2. 优化返回顶部按钮的滑动效果

以下是优化返回顶部按钮的滑动效果的代码，使用了缓动函数实现平滑的滚动过程。

function getScrollTop() {
    return document.documentElement.scrollTop || document.body.scrollTop;
}
function setScrollTop(value) {
    document.documentElement.scrollTop = value;
    document.body.scrollTop = value;
}
function goTop() {
    const scrollTop = getScrollTop();
    if (scrollTop > 0) {
        const pace = Math.floor(scrollTop / 10);
        setScrollTop(scrollTop - pace);
        setTimeout(goTop, 30);
    }
}

同时，在“返回顶部”按钮的点击事件中改为调用goTop()函数即可。

backToTopBtn.onclick = function() {
    goTop();
}

四、总结

通过以上攻略，可以方便地实现网站上的“返回顶部”按钮。通过优化效果，可以使用户有更好的使用体验，提高网站的可用性和用户满意度。