js原生锚点定位的方法

 用法:  document.getElementById("#" + id).scrollIntoView(true);document.getElementById("#" + id).scrollIntoView(false);// 如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。// 如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。

<div class="project-left"><div class="project-card" v-for="(item,index) in 6" :id="'card' + index" @click="goToAnchor(index)">测试</div></div>

// 右侧滚动元素

<div class="result-card" v-for="(item,index) in 17" :id="'div' + index"><Collapse v-model="item.value" accordion><Panel name="1">史蒂夫·乔布斯{{ index }}<div slot="content"><Table :columns="columns1" :data="data1"></Table></div></Panel><Panel name="2">斯蒂夫·盖瑞·沃兹尼亚克<p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen GaryWozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UCBerkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p></Panel><Panel name="3">乔纳森·伊夫<p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p></Panel></Collapse>
</div>

// JS部分

goToAnchor(index){document.querySelector('#div' + index).scrollIntoView({block: 'start',behavior: 'smooth'});
},

用到的方法：

scrollIntoView
el.scrollIntoView(); // 等同于el.scrollIntoView(true)
el.scrollIntoView(false);
如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；

如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。

如果没有提供该参数，默认为true。

//这个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)

// 注意页面一定要能滚动，这个方法才会生效，否则，你让我如何给你滚动呢？

js 锚点定位的方法相关推荐

js锚点定位_overflow属性详解，利用CSS实现锚点定位
1.overflow的裁剪界线--border-box overflow属性用于指定块容器元素的内容溢出时的表现方式--滚动,裁剪,自适应."BFC的最佳结界"只是其衍生出来的特性 ...
js 锚点定位的2种简单方法
一.解决方案第一种方案:传统的锚点定位但是这个方案有一个弊端,就是会影响url 的hash <div id="anchor">跳到这里来</div> / ...
锚点定位的三种解决方法
因为在项目中遇到锚点定位的问题,觉得有必要单独成文,来介绍锚点定位的解决办法. 一学习锚点定位之前的知识储备: 1.1 #号的作用 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如,h ...
2.32 js几种定位方法总结
2.32 js几种定位方法总结前言本篇总结了几种js常用的定位元素方法,并用js点击按钮,对input输入框输入文本一.以下总结了5种js定位的方法除了id是定位到的是单个element元 ...
Android tabLayout+recyclerView实现锚点定位
原文链接:https://mp.weixin.qq.com/s/L3o2i3WTmg1ScXEYDS8YCg 在上一篇文章 [Android 实现锚点定位 ](https://mp.weixin.qq ...
php html 锚点,html中怎么设置锚点定位？设置锚点定位方法汇总
很多html,都会遇到锚点定位,那么html中怎么设置锚点定位?下面我们来总结一下html中怎么设置锚点定位方法有哪些?以及汇总一下html中设置锚点定位方法. 在html中设置锚点定位我知道的有几种 ...
前端开发周边（js版页内锚点跳转方法）
js版页内锚点跳转方法关键词:focus(获取光标) 使用方法: 1.首先引入 jQuery HTML代码段 <div><h1 id="text1">12 ...
【前端用法】html5实现地理位置定位（JS获取当前地理位置的方法）
本文目录一.背景描述二.实现方案方案一方案二一.背景描述目前在做公司的一个网站,有个需求是:当别人进入网站时自动定位他的地理位置,包括市区,方便给他推荐当前城市的特色信息. 其实,这也是一 ...
元素在锚点定位后始终在页面居中显示的方法
元素在锚点定位后始终在页面居中显示的方法锚点定位功能可以使我们快速方便地跳转到我们想去的任何位置,但是如果我们在某个元素上添加锚点并跳转后,该元素始终会贴近在浏览器顶部,下面举例说明. 比如说有这样 ...

js 锚点定位的方法

js原生锚点定位的方法

js 锚点定位的方法相关推荐

最新文章

热门文章

js 锚点定位的方法

js原生 锚点定位的方法

js 锚点定位的方法相关推荐

最新文章

热门文章

js原生锚点定位的方法