按钮回到顶部（H5+JS）"/>
点击按钮回到顶部（H5+JS）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>回到顶部</title>
</head>
<style>/*鼠标滑动20px后显示定值按钮*/#btnTop {display: none;position: fixed;bottom: 20px;right: 30px;z-index: 99;border: none;outline: none;background-color: #89cff0;color: white;cursor: pointer;padding: 15px;border-radius: 10px;}#btnTop:hover {background-color: #1E90FF;}.a {margin-top: 100px;background-color: wheat;width: 1000px;height: 200px;}.b {background-color: silver;width: 1000px;height: 600px;}.c {background-color: firebrick;width: 1000px;height: 600px;}div {margin: 5px auto;}img {margin: 40px 100px;}/*鼠标悬停放大延时秒*/div img {cursor: pointer;transition: all 0.7s;}/*鼠标悬停放大倍数*/div img:hover {transform: scale(1.5);}
</style>
<body><div class="a"><img src="../PublicImg/Number/2.jpg" height="150"/>
</div>
<div class="b"><img src="../PublicImg/Number/3.jpg" height="313"/>
</div>
<div class="c"><img src="../PublicImg/Number/4.jpg" height="313"/>
</div>
<button onclick="returnTop()" id="btnTop" title="返回顶部">返回顶部</button>
<script>//回到顶部滑动效果window.onscroll = function () {scrollFunction()};var timer = null;btnTop.onclick = function () {cancelAnimationFrame(timer);timer = requestAnimationFrame(function fn() {var oTop = document.body.scrollTop || document.documentElement.scrollTop;if (oTop > 0) {document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;timer = requestAnimationFrame(fn);} else {cancelAnimationFrame(timer);}});}// 当网页向下滑动 20px 出现"返回顶部" 按钮window.onscroll = function () {scrollFunction()};function scrollFunction() {console.log(121);if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {document.getElementById("btnTop").style.display = "block";} else {document.getElementById("btnTop").style.display = "none";}}// 点击按钮，返回顶部function returnTop() {document.body.scrollTop = 0;document.documentElement.scrollTop = 0;}</script>
</body>
</html>
更多推荐
点击按钮回到顶部（H5+JS）
发布评论