利用JavaScript实现页面导航层级指示效果-创新互联

利用JavaScript实现页面导航层级指示效果？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

10年积累的网站设计、做网站经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先做网站后付款的网站建设流程，更有霸州免费网站建设让你可以放心的选择与我们合作。

我们上网经常看到一些页面层级指示的效果，比如淘宝、京东、百度百科等，用于指示用户浏览页面到哪里了。可以起到很好的交互效果，现在我们就来自己去实现以下类似的效果。主要用到的API是scrollIntoView 和 getBoundingClientRect方法，原理是监听页面滚动元素，当元素距离到浏览器视口一定的位置的时候就证明元素开始出现在页面的视口，就可以标识右边的指示栏。

代码如下：

 
 
 


 

  

   

    
标题1
    
内容1
   
   

    
标题2
    
内容2
   
   

    
标题3
    
内容3
   
   

    
标题4
    
内容4
   
   

    
标题5
    
内容5
   
   

    
标题6
    
内容6
   
  
  

   

    
标题1
    
标题2
    
标题3
    
标题4
    
标题5
    
标题6
   
  
 
 

网站名称：利用JavaScript实现页面导航层级指示效果-创新互联
网页地址：http://cdkjz.cn/article/escoe.html