react hash路由使用‘锚点’效果

文章参考

  1. react-router解决锚点跳转问题
  2. scrollIntoView()实现简单的锚点定位
  3. https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView

问题描述

今天想做一个通讯录,根据英文字母作为索引定位导航,因此,就想到了锚点,但是锚点是在地址栏中后面添加#,但是这个和路由冲突,直接使用<a href="#aaa">就相当于路由跳转页面了;如果用JS控制滚动条,逻辑就变为很复杂了,最后在网上找了相关的办法——使用docObj.scrollIntoView()

案例

scrollLocation(indexStr){
    var widget = document.getElementById('location_'+indexStr);
    widget.scrollIntoView();
  }

scrollIntoView 介绍

参数介绍

element.scrollIntoView(); // 等同于element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean型参数
element.scrollIntoView(scrollIntoViewOptions); // Object型参数

  1. 如果为true,元素的顶端将和其所在滚动区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
  2. 如果为false,元素的底端将和其所在滚动区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
  3. scrollIntoViewOptions 参数说明:
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}

案例说明

//这个title-part元素将以平滑的滚动方式滚动到与视口底部齐平地方(有兼容性问题)
document.querySelector("#title-part").scrollIntoView({
	block: 'end',
	behavior: 'smooth' 
})
 
//这个article-part元素将以平滑的滚动方式滚动到与视口顶部齐平地方(有兼容性问题)
document.querySelector("#article-part").scrollIntoView({
	block: 'start',
	behavior: 'smooth'
})
 
//这个articleMU-part元素将木讷的瞬间滚动到与视口顶部齐平地方(无滚动动画效果)
document.querySelector("#articleMU-part").scrollIntoView();//默认值就是true,可以不写
 
//这个titleMU-part元素将木讷的瞬间滚动到与视口底部齐平地方(无滚动动画效果)
document.querySelector("#titleMU-part").scrollIntoView(false)

没有更多推荐了,返回首页