电商网站运营流程,从哪个网站设置宽带主机,苏州网站排名推广,网络服务列表在哪里需求#xff1a;实现目录点击跳转到指定位置#xff0c;点击后直接定位到指定模块 效果#xff1a; 实现方法#xff1a;
#xff08;1#xff09;a标签跳转 普通使用#xff1a;
!DOCTYPE html
htmlheadtitlea-Demo/title实现目录点击跳转到指定位置点击后直接定位到指定模块 效果 实现方法
1a标签跳转 普通使用
!DOCTYPE html
htmlheadtitlea-Demo/title/headstyle/* bar超出屏幕显示在屏幕最上方 */.bar {position:fixed;top:0;bottom:0}.bar a {padding: 20px;}div.content div {padding-top: 20px;height: 1000px;scroll-behavior: smooth;}/* 加上这一句实现平滑滚动效果 */html, body {scroll-behavior:smooth;}/stylebodydiv classbara href#div1跳转1/aa href#div2跳转2/aa href#div3跳转3/a/divdiv classcontentdiv iddiv1这是div1/divdiv iddiv2这是div2/divdiv iddiv3这是div3/div/div/body
/html
script/script2scrollIntoView跳转
语法
element.scrollIntoView; // 等同于element.scrollIntoView(true)
element.scrollIntoViewalignToTop; //布尔参数
element.scrollIntoViewscrollIntoViewOptions; //对象参数在vue3中应用结合上面页面中的案例
绑定a标签href地址填入对应id名称增加点击事件 div v-for(item,index) in navList :keyindexa :href# index classmulu-item :classindexnavIndex?active: click.preventclickNav(index,item) img :srcitem.icon alt{{item.title}}/a/div
div classlink v-for(content,index) in navList :keycontent.nameh2 :idindex{{content.title}}/h2......../div
const clickNav (index, item) {navIndex.value indexconst element document.getElementById(index);element.scrollIntoView({ behavior: smooth });}
3v-scrollspy插件
在 Vue 中你可以使用 v-scrollspy 指令来设置目录的锚点。首先你需要安装 vue-scrollspy
import VueScrollspy from vue-scrollspy;
在vue组件中使用
div classmulu-item :classindexnavIndex?active: clickclickNav(index,item) img :srcitem.icon alta :href# index{{item.title}}/a/divdiv classlink v-for(content,index) in navList :keycontent.nameh2 :idindex{{content.title}}/h2......../div
import VueScrollspy from vue-scrollspy;methods: {clickNav(index, item) {this.navIndex index;this.$scrollspy.scrollTo(index);}}
