4种⽅法实现html页⾯内锚点定位及跳转
项⽬中经常会出现点击跳转锚点的⽅法，⽐如给⼀个a标签⼀个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后⾯都会出现⼀个诸如kjc/#锚点，然后你点击给⼀次后退都是退回上⼀个选择的锚点url，这⾥总结4个跳转锚点的⽅法。
第⼀种⽅法
也是最简单的⽅法是锚点⽤标签，在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属性，当点击锚点后，页⾯滚动到相应的DIV。接着上⾯的代码，具体添加如下代码：
$(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;
});
});
注意：运⾏上⾯的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。    $("html, body")可以替换为响应的div，如果不起作⽤，试着给该div增加overflow：scroll属性。 另外，脚本可以进⼀步优化，⾃⼰来试试 这样做的好处是：URL地址不会变，同时点击锚点时会⾃动响应scroll事件，不需要重新绑定。 缺点是：如果页⾯复杂的话，偏移值可能会发⽣变化需要算法辅助。
第四种⽅法
是⽤js的srollIntoView⽅法，直接⽤:
//⽐如：
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
这⾥就是点击id是#roll1的元素可以滚动到id是#roll1_top的地⽅，这⾥的#roll1和#roll1_top最好是⼀⼀对应的， 这种⽅法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。代码如下：
<html>
<head>
<title>HTML5_ScrollInToView⽅法</title>
<meta  charset="utf-8">
<style type="text/css">
#myDiv{
height:900px;
background-color:gray;
}
#roll_top{
height:900px;
background-color:green;
color:#FFF;
font-size:50px;
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>
<div id="roll_top">
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</body>
</html>
javascript部分
/*
如果滚动页⾯也是DOM没有解决的⼀个问题。为了解决这个问题，浏览器实现了⼀下⽅法，以⽅便开发⼈员如何更好的控制页⾯的滚动。在各种专有⽅法中，HTML5选择了scrollIntoView()作为标准⽅法。
scrollIntoView()可以在所有的HTML元素上调⽤，通过滚动浏览器窗⼝或某个容器元素，
调⽤元素就可以出现在视窗中。如果给该⽅法传⼊true作为参数，或者不传⼊任何参数，那么
窗⼝滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传⼊false作为参数，调⽤元素
会尽可能全部出现在视⼝中（可能的话，调⽤元素的底部会与视⼝的顶部齐平。）不过顶部
不⼀定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页⾯发⽣变化时，⼀般会⽤这个⽅法来吸引⽤户注意⼒。实际上，为某个元素设置焦点也
会导致浏览器滚动显⽰获得焦点的元素。
⽀持该⽅法的浏览器有 IE、Firefox、Safari和Opera。
*/
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
}
综上4种⽅法，第三种、第四种是最值得推荐的。
实际使⽤⽰例，具体代码如下：
<div class="fix-bar-box" id="div_assertErr">
<div class="fix-bar">
<button type="button"  onclick="viewErrInfo();" class="frm-button-blue"/>查看错误信息</button>
</div>
</div>
<script type="text/javascript">
var relationErrInfo=0;
function viewErrInfo() {
$("html,body").animate({scrollTop: $($(".relationTradeErr")[relationErrInfo]).offset().top}, 800);
var size=$(".relationTradeErr").length;
if(relationErrInfo < size-1){
html href属性relationErrInfo++;
}else {
relationErrInfo=0;
}
}
</script>
代码释义：使⽤场景——页⾯上有多个relationTradeErr，根据⾃定义class属性（relationTradeErr）跳转到对应位置，显⽰在页⾯顶部，再次点击时实现跳转到下⼀个错误提⽰信息。
如果只有⼀个时可调整为如下写法：
function viewErrInfo() {
$("html,body").animate({scrollTop: $(".relationTradeErr").offset().top}, 800);
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。