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

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

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

用a标签的href属性

这是比较常用的一种方法

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

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

    
    
    
    
    



    

        1
        2
        3
    
    

        

            
JAMES
            
PAUL
            
HARDEN
        
    

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

通过window.location.hash

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

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

    
    
    
    
    



    

        JAMES
        PAUL
        HARDEN
    
    

        

            
JAMES
            
PAUL
            
HARDEN
        
    
    

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

用scrollTop属性实现

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

    
    
    
    
    
    



    

        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有动画。

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

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

	
	
	


	

	
click
	

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