JS简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示 - 替代CSS粘性定位position：sticky方案

Posted 2022-07-31 Rudon滨海渔村

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示 - 替代CSS粘性定位position：sticky方案相关的知识，希望对你有一定的参考价值。

效果图

为什么不用sticky

懒

其实sticky很炫酷：一个很厉害的属性——sticky_高shan仰止的博客-CSDN博客

JS实现 - 完整代码

核心思路： js监测页面滚动高度，实时对比，通过addClass操作显示、隐藏DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rudon - JS简单实现"滚动到顶部"按钮悬浮效果，在一定高度才显示 - 替代CSS粘性定位position：sticky方案</title>
</head>
<body style="background: linear-gradient(to bottom, #E4EFE0 0%, #FFFFFF 90%); padding-left: 100px;">

    <h1>XX产品介绍</h1>
    <h3>页面滚动到一定高度时显示“回到顶部”按钮，或者“联系我们”按钮</h3>
    <div style="line-height: 40px;">
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
        <p>介绍</p><p>介绍</p><p>介绍</p><p>介绍</p><p style="color: red;">介绍</p>
    </div>


    <div id="btn-to-top" class="btn-fade hidden" onclick="goToTop();">
        回到顶部
    </div>

    <div id="btn-call" class="btn-fade hidden">
        联系电话
    </div>



    <style>
        /* JS判断页面滚动位置，决定按钮是否显示 */
        .hidden 
            display: none;
        

        /* 渐入渐出效果 */
        .btn-fade 
            -webkit-transition: all 0.5s ease;
            transition: all 0.5s ease;
        

        /* 按钮自身样式 */
        #btn-to-top 
            /* 设置好显示的位置 */
            position: fixed;
            bottom: 10px;
            right: 10px;

            width: 30px;
            height: auto;
            background-color: rgb(114, 250, 205);
            border: 1px solid #666965;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0.7;
        

        /* 按钮自身样式 */
        #btn-call 
            /* 设置好显示的位置 */
            position: fixed;
            bottom: 40%;
            right: 10px;

            width: 30px;
            height: auto;
            background-color: rgb(243, 235, 128);
            border: 1px solid #666965;
            text-align: center;
            border-radius: 5px;
            cursor: pointer;
            opacity: 0.7;
        
    </style>




    <!-- 先加载JQuery，方便操作 -->
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.0.min.js"></script>



    <script>
        /**
         * 滚动了多少像素，就显示按钮
         */
        let showing_height_TOP = 300; // 回到顶部 按钮
        let showing_height_CALL = 200; // 联系电话 按钮


        // 监测页面滚动
        $( window ).on( 'scroll', function()
            // 当前距离
            let scrollTop = $( this ).scrollTop();

            // 判断按钮“回到顶部”是否显示
            if( scrollTop > showing_height_TOP ) 
                $('#btn-to-top').removeClass( 'hidden' );
            else 
                $('#btn-to-top').addClass( 'hidden' );
            

            // 判断按钮“联系电话”是否显示
            if( scrollTop > showing_height_CALL ) 
                $('#btn-call').removeClass( 'hidden' );
            else 
                $('#btn-call').addClass( 'hidden' );
            
        );



        // 滚回页面顶部
        function goToTop () 
            /* 德芙丝滑滚动 */
            $('html,body').animate(scrollTop: '0px', 800);

            /* 雷厉风行滚动 */
            // $(window).scrollTop(0);
        

    </script>




</body>
</html>

sticky完整例子

来自一个很厉害的属性——sticky_高shan仰止的博客-CSDN博客

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .daohang 
        width: 100%;
        height: 100px;
        position: sticky;
        top: 0;
        background-color: pink;
      
    </style>
  </head>
  <body>
    <div>
      <div>我是标题</div>
      <h1 class="daohang">孙悟空</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h1 class="daohang">猪八戒</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h1 class="daohang">唐僧</h1>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>

      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
      <h5>我是内容</h5>
    </div>
  </body>
</html>

封面

以上是关于JS简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示 - 替代CSS粘性定位position：sticky方案的主要内容，如果未能解决你的问题，请参考以下文章

DIV滚动到顶部或者固定高度悬浮

回到首页滚动特效

js-点击按钮页面滚动到顶部，底部，指定位置

PC端网页vue项目，页面滚动点击悬浮按钮最快的方法

js平滑滚动到顶部,底部,指定地方