返回页面顶部top按钮通过锚点实现(自写)

2023年6月11日上午4:42 • JavaScript

下面是"返回页面顶部top按钮通过锚点实现（自写）"的完整攻略：

什么是返回页面顶部top按钮和锚点

在一个网页中，如果页面内容很多，用户在滚动页面时需要不断的滑动鼠标或手指，有时非常的不方便。为了解决这个问题，我们通常会添加一个“返回页面顶部”的按钮，让用户一键回到页面的顶部。

而锚点是指通过HTML代码中的href属性，在同一页面内跳转到不同的锚点位置，这也就是我们常见的内链。

实现步骤

下面我们来详细介绍如何实现这样一个返回页面顶部的按钮通过锚点实现的效果。

步骤1 - 添加HTML代码

首先我们要在页面中添加一个“返回顶部”的按钮，并为其添加id，如下代码示例所示：

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

这里我们为跳转位置设置了一个id值为“top”。

步骤2 - 添加CSS样式

接下来我们要为按钮添加CSS样式，让它浮动到页面右下角并添加一些样式，代码如下：

#back-to-top {
    display: none;
    position: fixed;
    bottom: 50px;
    right: 50px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    text-align: center;
    background: #333;
    color: #fff;
    border-radius: 50%;
    transition: all 0.3s ease-in-out;
    z-index: 999;
}
#back-to-top:hover {
    background: #666;
}

这里我们通过position: fixed;将按钮固定到浏览器窗口的右下角，display: none;为了保持初始状态不显示，bottom和right控制按钮距离浏览器窗口边缘的距离，同时添加一些样式使其看起来更加美观。

步骤3 - 添加JS代码

为了让按钮在页面中滚动时能够自动出现和消失，我们需要添加一些JS代码，这里需要使用jQuery库，代码如下：

$(function() {
    $(window).scroll(function() {
        if ($(window).scrollTop() > 100) {
            $('#back-to-top').fadeIn(1000);
        } else {
            $('#back-to-top').fadeOut(1000);
        }
    });
    $('#back-to-top').click(function() {
        $('html,body').animate({scrollTop:0}, 700);
        return false;
    });
});

这里的代码中，$(window).scroll(function() {...});用来检测页面滚动，如果滚动的距离超过100像素，就将“返回顶部”按钮淡入展示；如果没有超过100像素，就将按钮淡出隐藏。而$('#back-to-top').click(function() {...});则用来添加一个点击事件，当用户点击按钮时，页面会平滑地返回到顶部。

示例1 - 实现左侧导航栏锚点定位

如果我们在页面中还有左侧的导航栏，并且想要点击导航栏中的菜单，能够跳转到对应的页面锚点位置，只需将导航栏菜单的href属性设置为对应的id值即可实现。

<ul>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
</ul>

<!-- 页面内容 -->
<section id="section1">
    <h2>Section 1</h2>
    <p>这是第1节内容</p>
</section>
<section id="section2">
    <h2>Section 2</h2>
    <p>这是第2节内容</p>
</section>
<section id="section3">
    <h2>Section 3</h2>
    <p>这是第3节内容</p>
</section>

示例2 - 实现页内跳转

如果我们想在页面中实现跳转，而不是返回页面顶部，只需将按钮的href属性改为对应的锚点位置即可实现。

<a href="#section2">跳转到Section 2</a>

<!-- 页面内容 -->
<section id="section1">
    <h2>Section 1</h2>
    <p>这是第1节内容</p>
</section>
<section id="section2">
    <h2>Section 2</h2>
    <p>这是第2节内容</p>
</section>
<section id="section3">
    <h2>Section 3</h2>
    <p>这是第3节内容</p>
</section>