JS 页面内锚点跳转

JS 实现页面内锚点跳转

//平滑的跳转
let element = document.getElementById("id");
if (element) {element.scrollIntoView({ behavior: 'smooth' });
}

知识点
scrollIntoView()方法会滚动元素的父容器，使被调用scrollIntoView()的元素对用户可见。

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

alignToTop 可选
Boolean值：
如果为true，元素的顶端将和其所在区的可视区域的顶端对齐。相应的 scrollIntoViewOptions: {block: “start”, inline: “nearest”}。这是这个参数的默认值。
如果为false，元素的底端将和其所在区的可视区域的底端对齐。相应的scrollIntoViewOptions: {block: “end”, inline: “nearest”}。
scrollIntoViewOptions 可选
一个包含下列属性的对象：
behavior 可选
定义动画过渡效果， "auto"或 “smooth” 之一。默认为 “auto”。
block 可选
定义垂直方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “start”。
inline 可选
定义水平方向的对齐， “start”, “center”, “end”, 或 "nearest"之一。默认为 “nearest”。

JS 页面内锚点跳转相关推荐

页面内锚点定位及其跳转
一.前言这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
前端开发周边（js版页内锚点跳转方法）
js版页内锚点跳转方法关键词:focus(获取光标) 使用方法: 1.首先引入 jQuery HTML代码段 <div><h1 id="text1">12 ...
https页面内http链接跳转时的referer问题
一.问题最近做项目,出现这样个问题,从合作方页面,通过链接跳转我们页面时,referer信息突然获取不到了. 两边代码都没有变更,很奇怪? 二.原因通过查找,最终发现,原来合作方页面升级为http ...
html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html> <html> <head> & ...
html锚点定位原理,html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: to div1 to div2 to div3 div1 div2 div3 这种方法的缺点是点击锚点之后,浏览器的 ...
csdn博客页面内任意自动跳转（附编写截图），自动目录，超链接跳转，MarkDown编辑器（默认编辑器）
文章目录 1.跳转方式 1.1 使用自动目录跳转 1.2 使用超链接跳转 1.2.1 跳转站外网址 1.2.2 跳转本页面任意地方 1.3使用html方式跳转(只能实现预览页跳转,实际跳转会失败) 1 ...
跳转定义_HTML中的超级链接和锚点跳转
好好学习,天天向上本章主要是HTML标签中,超级链接和锚点跳转的基础使用一.超级链接 HTML 使用超级链接与网络上的另一个文档相连. 超链接可以是一个字,一个词,或者一组词,也可以是一幅图像,可 ...
web前端学习笔记——锚点跳转
锚点跳转一.页面内锚点跳转在同一页面中,这个位置跳转到另一个位置方法: 设置锚点两种方式: 在目标位置随意找一个标签,添加一个id属性 <h2 id="mubiao" ...
html怎样同框架页面内跳转,使用iframe框架时，实现子页面内跳转到整个页面，而不是在子页面内跳转...
首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...

JS 页面内锚点跳转

JS 页面内锚点跳转相关推荐

最新文章

热门文章