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