鼠标滑到一定程度，出现返回顶部然后点击可以直接跳转到顶部

迈不过友情╰ 2023-01-15 14:23 97阅读 0赞

这里直接可以参考http://imakewebthings.com/waypoints/api/waypoint/文档

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
        <script src="waypoints/jquery.waypoints.js"></script>
        <title>鼠标滑到一定程度，出现返回顶部然后点击可以直接跳转到顶部</title>
    </head>
    <style>
        .m-padded {
            padding: 1em !important;
        }
        .m-fixed {
            position: fixed !important;
            z-index: 10 !important;
        }
        .m-right-bottom {
            bottom: 0 !important;
            right: 0 !important;
        }
    
        #toTop-button{
            background: #E0E1E2;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 62px;
            cursor: pointer;
        }
    
        #toTop{
            position: absolute;
            top:110px;
            bottom: 0;
            left: 15px;
            right: 0;
    
            width: 50px;
    
        }
    </style>
    <body>
    <div id="waypoint">
    
    xxxxx
    <div id="toolbar" class="m-padded m-fixed m-right-bottom" style="display: none">
        <div id="wrap" style="text-align: center">
            <button type="button"  style="background-color: #009c95;display: block;width: 50px;height: 50px;font-size: 1rem;border: none;font-weight: 700;
        line-height: 1em" >智搜</button>
            <a href="#"  style="background-color: #009c95;line-height: 1em;text-decoration: none;width: 50px;height:50px;line-height:48px;display: block" >商城</a>
            <div id="toTop-button">
                <img style="width: 48%;color: rgba(0,0,0,.6);" src="https://g.csdnimg.cn/side-toolbar/3.0/images/fanhuidingbucopy.png">
            </div>
        </div>
    </div>
    
    
    </div>
    
    <script>
        $("#toTop-button").mouseenter(function () {
            //alert("你好");
            $("#toTop-button").html("" +
                "   <span style='font-size: 12px;    font-weight: bold' id='toTop' >返回顶部</span>");
        })
        $("#toTop-button").mouseleave(function () {
    
            $("#toTop-button").html("" +
                "   <img style='width: 48%;color: rgba(0,0,0,.6);' src='https://g.csdnimg.cn/side-toolbar/3.0/images/fanhuidingbucopy.png'>")
        });
        $("#toTop-button").click(function () {
            window.scrollTo(0,0);
           // $(window).scrollTo(0,0);
        });
        new Waypoint({
            element: document.getElementById('waypoint'),
            handler: function(direction) {
                if (direction == 'down') {
                    $('#toolbar').show(100);
                } else {
                    $('#toolbar').hide(500);
                }
            }
        })
    </script>
    
    </body>
    </html>

![在这里插入图片描述][20210422214808165.png]  
说明：

$("#toTop-button").click(function () {
            window.scrollTo(0,0);//这是原生js
           // $(window).scrollTo(0,0);//需要导入<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
        });

[20210422214808165.png]: /images/20221022/5013bd23d14d473c86aeeb1835d3634f.png