gpt4 book ai didi

javascript - 侧面板到顶部。还有其他解决办法吗?

转载 作者:太空宇宙 更新时间:2023-11-04 06:30:06 25 4
gpt4 key购买 nike

我正在尝试将按钮置于侧面板的顶部。但是我遇到了一个问题,因为我需要我的 SIDE 面板作用于滚动而不是整个 body 。例如有代码:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="side">
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

</div>
</body>
<script type="text/javascript" src="js.js"></script>
</html>

JS:

const side = document.getElementById('side');
const top = side.offsetTop;

if (top > 10){
document.getElementById('topBtn').style.display = "block";
} else {
document.getElementById('topBtn').style.display = "none";
}

最佳答案

function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
#topBtn{
position:fixed;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="side">
<button onclick="topFunction()" id="topBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

</div>
<script src="js.js"></script>
</body>
</html>

关于javascript - 侧面板到顶部。还有其他解决办法吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54766268/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com