使用scrollIntoView进行锚点定位效果
不知道你有没有遇到这样的需求:锚点定位?进入页面某个元素需要出现在可视区?…这一类的需求归根结底就是处理元素与可视区域的关系。我接触了很多前端小伙伴,实现的方式有各种各样的,比如使用 scrollTop、监听滚动等等,这也是很多小伙伴第一个想到的。 今天我们介绍一种更简单的方式:scrollIntoView。
项目中经常会出现点击跳转锚点的方法,比如给一个a标签一个href=“#锚点”,然后要跳的锚点给个id=“锚点”,这样就实现简单的跳转,但是这样在url地址栏后面都会出现一个诸如www.geekjc.com/#锚点,然后你点击给一次后退都是退回上一个选择的锚点url,这里我总结4个跳转锚点的方法。
a标签进行定位
- 也是最简单的方法是锚点用标签,在href属性中写入div的id
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
这种方法的缺点是点击锚点之后,浏览器的URL会发生变化,如果刷新可能会出现问题。
js事件
window.location.hash="divId"
跳转,但地址也会发生变化,感觉跟第一种方法没区别,甚至更麻烦
利用animate属性
是用animate属性,当点击锚点后,页面滚动到相应的DIV。文章来源:https://www.toymoban.com/news/detail-672915.html
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
代码我没验证这段来自-》》》》》
作者:Flutter错误集
链接:https://juejin.cn/post/6908965295109603335
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
srollIntoView方法
- scrollIntoView 是 HTMLElement 集合下的一个 API,每一个 HTML 元素都拥有这个 API。它的作用就和字面意思一样:滚动到可视区。 为了更加官方一点,我们还是先来看看官方的解释。
- 官方解释:Element 接口的 scrollIntoView()方法会滚动元素的父容器,使被调用 scrollIntoView()的元素对用户可见。
- 官方的解释还是比较好理解的,我们摘要几个关键词出来:
• Element 接口
• 滚动
• 可见
从上我们大致也能理解,无非就是让某一个元素对用户可见,但是为了更准确又通俗一点,我们用自己的话简单概述一遍。
scrollIntoView()是 HTML 元素的一个方法,假如我们有一个元素容器出现了滚动条,有滚动条必然就有一些元素是不可见的,为了让隐藏的元素可见,我们可以手动滚动滚动条,让元素出现,另一种方法就是调用隐藏元素的 scrollIntoView 方法,让它自动滚动到可视区内。
element.scrollIntoView(); // 等同于 element.scrollIntoView(true)
element.scrollIntoView(alignToTop); // Boolean 型参数
element.scrollIntoView(scrollIntoViewOptions); // Object 型参数
参数解释:
• alignToTop:它是一个 Boolean 值,它用来规定元素出现在可视区后与可视区的对齐方式,为 true 代表顶端对齐,false 代表低端对齐。
• scrollIntoViewOptions:它是一个对象,该参数主要是配置元素的动画效果以及位置的,它有以下 3 个属性:
• behavior:它定义元素出现在可视区内过程的动画,有 auto 和 smooth 两种选择。
• block:定义元素的垂直方向的对齐方式,有"start", "center", "end", 或 "nearest" 4 个选项,默认 start。
• inline:定义元素水平对齐方式,有"start", "center", "end", 或 "nearest"4 个选项,默认"nearest"。
`在这里插入代码片`
注意:
有些小伙伴可能发现两个参数都能定义元素的对齐方式,它们之间有什么联系呢?当 alignToTop 为 true 时,scrollIntoViewOptions: {block: "start", inline: "nearest"}这是它的默认值,当 alignToTop 为 false 时,scrollIntoViewOptions: {block: "end", inline: "nearest"}这是它的默认值。
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset="utf-8">
<style type="text/css">
#myDiv{
/* height:900px; */
height: 50px;
background-color:gray;
overflow-y: scroll;
}
#roll_top{
height:50px;
background-color:green;
color:#FFF;
font-size:20px;
position:relative;
}
#bottom{
/* position:absolute; */
display:block;
left:0;
bottom:0;
}
</style>
</head>
<body>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div id="myDiv">
<div id="roll_top">scrollIntoView(ture)元素上边框与视窗顶部齐平</div>
<div id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</div>
</div>
</body>
<script>
window.onload = function(){
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#bottom").scrollIntoView(true);
}
}
</script>
</html>
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素
会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部
不一定齐平,例如:
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。文章来源地址https://www.toymoban.com/news/detail-672915.html
到了这里,关于4种方法实现html 页面内锚点定位及跳转的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!