其他分享
首页 > 其他分享> > 鼠标滑到一定程度，出现返回顶部然后点击可以直接跳转到顶部

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

作者：互联网

这里直接可以参考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>

在这里插入图片描述
说明：

  $("#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>
    });

标签：function,鼠标,顶部,button,toTop,scrollTo,window,important,跳转
来源： https://blog.csdn.net/weixin_44093711/article/details/116033562