单击按钮时如何使HTML页面一直向上滚动？ [复制]
Posted
技术标签:
【中文标题】单击按钮时如何使HTML页面一直向上滚动？ [复制]【英文标题】：How to make HTML page scroll all the way up when clicking a button? [duplicate] 【发布时间】：2021-04-09 23:32:06 【问题描述】：所以我的 html 页面中有以下内容：
我故意这样做，以便发生“溢出”，从而导致右侧的滚动条。
所以我制作了一个名为“单击以向上滚动”的按钮。所以我想要的是，每次我们点击那个按钮时，文档都会立即向上滚动。这意味着如果我一直向下导航，然后单击按钮，它会一直向上。
我查了一下，有一个方法“scrollTop”，但它似乎不起作用。希望能得到一些帮助。
document.getElementById("scrollup").addEventListener("click", scrollUpmost);
function scrollUpmost()
$(document).scrollTop();
*
margin: 0;
padding: 0;
box-sizing: border-box;
html, body
height: 100%;
.container
border: 1px solid orange;
.big_div
border: 1px solid black;
height: 1200px;
#scrollup
margin-top: 900px;
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>【问题讨论】：
您只需在滚动函数window.scrollTo( top: 0, behavior: 'smooth' ); 中添加这一行@
【参考方案1】：
$("#scrollup").click(function()
$("html, body").animate( scrollTop: 0 , "slow");
return false;
); *
margin: 0;
padding: 0;
box-sizing: border-box;
html, body
height: 100%;
.container
border: 1px solid orange;
.big_div
border: 1px solid black;
height: 1200px;
#scrollup
margin-top: 900px;
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class = "big_div">
<button id = "scrollup">Click to scroll up</button>
</div>
</div>
<script src = "test.js"></script>
</body>
</html>请试试这个代码
【讨论】：
以上是关于单击按钮时如何使HTML页面一直向上滚动？ [复制]的主要内容，如果未能解决你的问题，请参考以下文章