页面内跳转到指定div的几种方法（锚点、hash、animate、scrollIntoView）

由于最近有回到顶部、根据nav定位到指定div和定位到输入错误的输入框的需求，所以在此分析此类需求可能的解决方案

用a标签的href属性

这是比较常用的一种方法

href。这是一个必需属性为锚定义一个超文本链接来源。这表示链接目标的URL或URL片段。URL片段是由一个hash符号（＃），它指定一个内部目标在当前文档中的位置（ID）开头的名字。

查资料的时候发现html5中a标签新增download属性，很强大但是兼容性还不够

    
    
    
    
    
 .link{
     float: left;
 }
 .target{
     float: left;
 }
 .target ul li{
     height: 400px;
 }
    



    
 1
 2
 3
    
    
 

     
JAMES
     
PAUL
     
HARDEN
 
    

缺点：点击跳转后url发生变化，页面刷新后可能有问题

通过window.location.hash

此方法原理与通过a标签的href属性相同，都是根据锚点来实现定位

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）。

    
    
    
    
    
 .link {
     float: left;
 }

 .target {
     float: left;
 }

 .target ul li {
     height: 400px;
 }
    



    
 JAMES
 PAUL
 HARDEN
    
    
 

     
JAMES
     
PAUL
     
HARDEN
 
    
    

缺点：点击跳转后url发生变化，页面刷新后可能有问题

用scrollTop属性实现

根据元素的scrollTop属性实现，这是之前很常用的一种实现方式，此处不细说。实例借助Jquery实现

    
    
    
    
    
    
 .link {
     float: left;
 }

 .target {
     float: left;
 }

 .target ul li {
     height: 400px;
 }
    



    
 JAMES
 PAUL
 HARDEN
    
    
 

     
JAMES
     
PAUL
     
HARDEN
 
    
    

缺点：如果页面复杂的话，偏移值可能会发生变化需要算法实现，并且脱离Jquery实现代码量会比较大，但是好处就是兼容性好，可行性高

用scrollIntoView实现

先看看用scrollIntoView实现的兼容性

兼容性还不错，关键是实现特别简单，不需要自己计算（偷懒神器）

• 语法
  element.scrollIntoView();
• 参数

// element.scrollIntoView(Boolean) Boolean型参数
1.如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
2.如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

// element.scrollIntoView(Obj) 型参数
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
// block与Boolean型参数作用相同，behavior参数是决定页面是如何滚动smooth有动画。

这个方法用的时候直接调用就ok，document.getElementById("divId").scrollIntoView();

	
	
	
		* {
			margin: 0;
			padding: 0;
		}

		body {
			height: 500px;
		}

		.scroll {
			margin-top: 300px;
			height: 200px;
			background: lightcoral;
		}

		.btn {
			padding: 10px 15px;
			position: fixed;
			right: 0;
			top: 300PX;
			background: rebeccapurple;
			border-radius: 10px;
			cursor: pointer;
		}
	


	
	click
	

当然，scrollIntoView还接受一个参数，更具体的细节可以参考MDN上的介绍

本文csdn地址