最简单的锚点跳转

综述
锚点定位是一个再熟悉不过的操作了,通常会用a标签href=#XX去实现,不过这样做,有一个问题,就是页面会有刷新感,而且地址栏会有变化,F5刷新,则#XXX还是显示在地址栏里,这样如果要进一步进行有关地址栏url的操作,就不得不再做些判断,所以寻找一些新的方法。

如果要求不是很高,scrollIntoView()这个方法就可以取代传统锚点定位,它是利用滚动原理,来将相应的元素滚动到可是区域内。接下来看看详细的介绍。

首先需要说明的是,这个方法并没有写入标准,但是大多数主流浏览器已经支持或部分支持其功能了,所以可以放心使用,当然如果有朝一日标准出来了,那就按标准来吧。

其次要说明的是,这是js原生方法,jquery等框架是使用不了的,所以,获得元素的方法一定是document.getElementById或querySelector,然后才可以点出来scrollIntoView()方法。

一个更简单的方法就是在你想要跳到的位置设置一个唯一id,
然后通过 document.querySelector("#你设置的位置").scrollIntoView(true);
语句就可以跳转到你设定的位置,传对象有动画效果,这个方法不止简洁,适应性还好,
image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2020年3月11日23点16分 一、导航栏的分隔符 这种文字之间的分割线,传统省事的做法是使用管道符( )来替代...
    CondorHero阅读 613评论 0 1
  • 1.a标签 这是顶部 跳转到顶部 这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新或返回该页...
    夜色如梦阅读 13,234评论 0 2
  • 在项目中,最简单最直接的锚点定位跳转的方式就是要给点击的a标签的href属性上,加上要跳转的内容对应的id,实现浏...
    苏日俪格阅读 5,386评论 0 0
  • 锚点链接是我们在开发中经常会用到的一个技术点,常见的常见有,页面内容过多,而我们不希望拿鼠标一直来回滚动,就需要用...
    坏丶毛病阅读 1,525评论 0 0
  • 在某些场景中,我们通常使用锚点,进行定位,跳转我们需要的页面 方法一a 标签的锚点跳转 如果在同一页面跳转,该方法...
    zhudying阅读 658评论 0 1