html 回到顶部按钮|标签HTML

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 回到顶部按钮|标签HTML相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<title>Testing Page</title>
	
	<!-- Normalize.css -->
	<link rel="stylesheet" href="https://necolas.github.io/normalize.css/6.0.0/normalize.css">

	<style>

		body{
			padding:50px;
		    font-family: sans-serif;
		}		

		ul{
			padding:0;
			list-style:none;
		}

		li{
			width:150px;
			height:300px;
			background-color:pink;
			border-bottom:4px solid white;
		}

		/* back to top button styles */

		#back-to-top {
		  display:block;
		  display:none;
		  position: fixed;
		  bottom: 20px;
		  right: 100px;
		  background: rgb(0, 0, 0);
		  background: rgba(0, 0, 0, 0.7);
		  width: 50px;
		  height: 50px;
		  text-decoration: none;
		  -webkit-border-radius: 35px;
		  -moz-border-radius: 35px;
		  border-radius: 35px;
		}

		#back-to-top:before{
			position: absolute;
			content:'';
			width:8px;
			height:8px;
			border:3px solid white;
			border-right:none;
			border-bottom:none;
			left: 18px;
    		top: 21px;
		    transform-origin: 66% 66%;
		    transform: rotate(45deg);
		    transition: all 0.15s ease-in-out;
		}

		#back-to-top:hover {
		  background: rgba(0, 0, 0, 0.9);
		}

		#back-to-top:hover:before {
			top:17px;
		}

	</style>
</head>
<body>

	<a href="#" id="back-to-top">
	</a>

	<h1>Test Page</h1>

	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

	
	<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
	<script>
		$(document).ready(function(){

			$(window).scroll(function(){
				if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
			    	$('#back-to-top').fadeIn(200);
			    } else {
			    	$('#back-to-top').fadeOut(200);
			    }
			})
			$('#back-to-top').click(function(){
				$('body,html').animate({
			        scrollTop : 0
			    }, 250);
			})
		})
	</script>
</body>
</html>

以上是关于html 回到顶部按钮|标签HTML的主要内容，如果未能解决你的问题，请参考以下文章

html 回到顶部按钮

简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

html css jquery 回到顶部按钮

html css 返回顶部按钮位置怎么固定？

Vue点击按钮回到顶部

回到顶部