Html 页面内跳转

我们常用的有：
1. 锚点跳转

2. 容器元素的scrollTo

3. 元素的scrollIntoView

简单的例子如下：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>页面内部跳转测试</title>
		<style>
			body{text-align:center}
			
			#main{
				margin-left: auto;
				margin-right: auto;
				width:500px; 
				height:300px;
				overflow-x: hidden;
				overflow-y: auto;
			}
		</style>
	</head>

	<body>		
     <div>
		页面内部跳转测试
	 </div>
    <div id="main">
		<div id="section1">
			<h1>Section 1</h1>
		</div>
		<p>
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
			Page internal jump test
		</p>
		<div>
		<div id="section2">
			<h1>Section 2</h1>
		</div>

		<div>
			页面内部跳转测试 
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试 
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试 
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试 
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试 
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
			页面内部跳转测试
		</div>
		</div>
	</div>
	
	
	<div>
        <a href="#section1">跳转到Section 1(using 锚点)</a>
    </div>
	<div>
        <a href="#section2">跳转到Section 2(using 锚点)</a>
    </div>
	
	<div>
        <a href="javascript:containerScrollTo('main', 'section1');">跳转到Section 1(using scrollTo)</a>
    </div>
	
	<div>
        <a href="javascript:containerScrollTo('main', 'section2');">跳转到Section 2(using scrollTo)</a>
    </div>
	
	<div>
        <a href="javascript:document.getElementById('section1').scrollIntoView();">跳转到Section 1(using scrollIntoView)</a>
    </div>
	
	<div>
        <a href="javascript:document.getElementById('section2').scrollIntoView();">跳转到Section 2(using scrollIntoView)</a>
    </div>

	</body>

</html>
<script>
	function containerScrollTo(containerId, elementId){
		var container = document.getElementById(containerId);
		var rect = document.getElementById(elementId).getBoundingClientRect();
		var scrollTop = rect.top + container.scrollTop - container.getBoundingClientRect().top;
		container.scrollTo({top: scrollTop});
	}
</script>

　　

posted @ 2024-01-16 16:45  SilverFox8588  阅读(23)  评论(0)  编辑  收藏  举报