js手写tab栏,添加锚点并巧妙解决固定头部导致的锚点定位问题

暂未做过多适配,请打开f12用手机模式预览:




  
  
  
  Document
  


  
首页 精选文章 推荐 朋友圈 生活 精选文章 朋友圈 联系方式 关于我们
主体内容

实现思路:主要计算元素距离外层元素的距离和自身宽度来计算应该滚动到的位置
实现效果:


实现效果.png

实际情况下可能会添加一些锚点,以下为添加锚点的代码和效果:



  
    
    
    
    Document
    
  
  
    
    
1.首页
首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容首页内容
2.精选文章
精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章精选文章
3.推荐
推荐
4.朋友圈
朋友圈
5.生活
生活
6.精选文章
精选文章

其中使用了padding-top:60px;margin-top:-60px;技巧解决了锚点的适配问题


添加锚点后的效果图.png

你可能感兴趣的:(js手写tab栏,添加锚点并巧妙解决固定头部导致的锚点定位问题)