html代码实现返回顶部的功能

涛哥
Html代码

返回顶部按钮是一个常见的功能，可以使用户更容易地回到页面顶部，尤其是在长网页上浏览时。上述代码是一个实现返回顶部按钮的HTML和JavaScript示例，具体需求如下：

  1. 在页面底部添加一个返回顶部按钮，按钮默认情况下应该隐藏。
  2. 当用户滚动页面超过100像素时，按钮应该显示。
  3. 当用户单击按钮时，页面应该平滑地回到顶部位置。

这些需求都可以通过上述HTML和JavaScript代码来实现。首先，我们使用CSS将按钮定位在页面的右下角，并将其默认情况下隐藏。然后，在JavaScript中，我们使用window对象的scroll事件来监听窗口滚动，并根据滚动位置切换按钮的显示状态。最后，当用户单击按钮时，我们使用window对象的scrollTo方法将页面滚动回顶部位置。

以下是一个简单的HTML返回顶部代码示例：

<!DOCTYPE html>
<html>
<head>
	<title>Back to Top Example</title>
	<style type="text/css">
		#back-to-top {
			position: fixed;
			bottom: 20px;
			right: 20px;
			display: none;
		}

		#back-to-top a {
			display: block;
			font-size: 14px;
			font-weight: bold;
			color: #fff;
			background-color: #333;
			padding: 10px;
			border-radius: 5px;
			text-decoration: none;
		}
	</style>
</head>
<body>
	<h1>Back to Top Example</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum viverra vehicula purus, vel ultrices ipsum feugiat non.</p>
	<p>Phasellus at sapien nibh. Sed imperdiet mauris non leo pellentesque feugiat. Donec id risus eget mi porta congue vel at nisl.</p>
	<!-- Back to Top Button -->
	<div id="back-to-top">
		<a href="#">Back to Top</a>
	</div>

	<script type="text/javascript">
		var backToTop = document.querySelector("#back-to-top");

		window.addEventListener("scroll", function() {
			if (window.pageYOffset > 100) {
				backToTop.style.display = "block";
			} else {
				backToTop.style.display = "none";
			}
		});

		backToTop.addEventListener("click", function() {
			window.scrollTo(0, 0);
		});
	</script>
</body>
</html>

上述示例中，我们使用CSS将返回顶部按钮定位在页面的右下角，并在默认情况下将其隐藏。我们使用JavaScript监听窗口滚动事件，当滚动超过100像素时，将显示返回顶部按钮。当用户单击按钮时，JavaScript将窗口滚动回顶部。

请注意，在HTML页面中，您可以根据需要更改按钮的样式和位置。

 
  • 返回功能
  • 样式