VSC | 实现返回顶部功能的几种方法

正在洗头

已于 2024-09-09 17:30:11 修改

阅读量594

点赞数 12

分类专栏： VSC 文章标签： javascript java 前端

于 2024-09-09 17:29:28 首次发布

本文链接：https://blog.csdn.net/weixin_69851346/article/details/142063667

版权

VSC 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、实现返回顶部功能

实现返回顶部功能，用户可在浏览长页面时轻松返回页面顶部。通过监听滚动事件，显示浮动按钮，点击后利用JavaScript或jQuery平滑滚动至页面顶部，提升用户体验。方法多样，包括原生JavaScript实现、CSS锚点结合JavaScript、以及利用jQuery插件快速集成。

二、方法

前三种是是没有过渡直接返回顶部效果，而第四种方法“简单的jQuery动画”方法效果为动态平滑上移，其中包括动态加载、绝对定位、简单的jQuery动画以及IE6的兼容性处理。

2.1 锚点链接

img是iconfont的图标。

<!-- img是iconfont的图标 -->
<!-- 第一种方法 使用锚点链接，href指向特定的id-->
<body style="height: 2000px;">
    <div id="top-one"></div>
    <a href="#top-one" style="position: fixed;right: 0;bottom: 0;">
        <img src="./返回顶部 .png" alt="">
    </a> 
</body>

2.2 scrollTop属性

<body style="height: 2000px;">
<div id="test" style="position: fixed;right: 0;bottom: 0;">
        <img src="./返回顶部 .png" alt="">
    </div>
</body>
<script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0
        }
</script>

2.3 scrollTo(x,y)方法

 <!-- 用scrollTo(0,0)中的x、y的值来跳转到页面的具体位置 -->
<body style="height: 2000px;">
 <div>
      <div class="box">
        <div style="height: 600px">1</div>
      </div>
    </div>
    <div style="position: fixed; right: 0; bottom: 0">
      <a href="javascript:window.scrollTo(0,0)" class="btn" title="回到顶端">
        <img src="./返回顶部 .png" alt=""
      /></a>
    </div>
</body>

2.4 简单的jQuery动画

这种方法包括动态加载、绝对定位、简单的jQuery动画以及IE6的兼容性处理。

html

<body>  
<div id="page" style="height: 2000px;">  
    <!-- 测试期间设置高度为2000px以便可以滚动 -->  
    <h1>页面内容</h1>  
    <p>滚动页面查看“返回顶部”按钮。</p>  
</div>  
  
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</body>

CSS

<style>
    /* 基本样式 */  
body, html {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;  
}  
  
#gotoTop {  
    display: none;  
    position: fixed;  
    bottom: 20px; /* 改为底部，更加直观 */  
    right: 20px; /* 保持在页面右侧 */  
    cursor: pointer;  
    padding: 10px 20px;  
    background-color: #fff;  
    border: 1px solid #ddd;  
    border-radius: 5px;  
    z-index: 1000; /* 确保按钮在内容之上 */  
    transition: opacity 0.3s ease; /* 平滑过渡效果 */  
}  
  
#gotoTop.hover {  
    background-color: #5CB542;  
    color: #fff;  
}  
  
/* 响应式设计（可选） */  
@media (max-width: 768px) {  
    #gotoTop {  
        bottom: 10px; /* 在小屏幕上调整位置 */  
        right: 10px;  
    }  
}
</style>

JavaScript

<script>
   $(document).ready(function() {  
    function gotoTop(options = {}) {  
        const { minHeight = 600 } = options;  
  
        const gotoTopHtml = '<div id="gotoTop" aria-label="返回顶部">返回顶部</div>';  
        $('body').append(gotoTopHtml);  
  
        const $gotoTop = $('#gotoTop');  
  
        $gotoTop.click(function() {  
            $('html, body').animate({ scrollTop: 0 }, 700);  
        }).hover(  
            function() { $gotoTop.addClass('hover'); },  
            function() { $gotoTop.removeClass('hover'); }  
        );  
  
        $(window).scroll(function() {  
            const scrollTop = $(window).scrollTop();  
            if (scrollTop > minHeight) {  
                $gotoTop.fadeIn(100);  
            } else {  
                $gotoTop.fadeOut(200);  
            }  
        });  
    }  
  
    gotoTop(); // 调用函数  
});
</script>