洞悉互聯(lián)網(wǎng)前沿資訊,探尋網(wǎng)站營銷規(guī)律
作者:狐靈科技 | 2022-05-12 14:49 |點擊:
項目中經(jīng)常會出現(xiàn)點擊跳轉(zhuǎn)錨點的方法,比如給一個a標簽一個href=“#錨點”,然后要跳的錨點給個id=“錨點”,這樣就實現(xiàn)簡單的跳轉(zhuǎn),但是這樣在url地址欄后面都會出現(xiàn)一個諸如www.geekjc.com/#錨點,然后你點擊給一次后退都是退回上一個選擇的錨點url,這里總結(jié)4個跳轉(zhuǎn)錨點的方法。
<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會發(fā)生變化,如果刷新可能會出現(xiàn)問題?!?/p>
window.location.hash="divId"
$(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;
});
});
注意:運行上面的腳本的之前,先將為錨點增加相應(yīng)的id,同時去掉href屬性。 $("html, body")可以替換為響應(yīng)的div,如果不起作用,試著給該div增加overflow:scroll屬性。 另外,腳本可以進一步優(yōu)化,自己來試試 這樣做的好處是:URL地址不會變,同時點擊錨點時會自動響應(yīng)scroll事件,不需要重新綁定。 缺點是:如果頁面復(fù)雜的話,偏移值可能會發(fā)生變化需要算法輔助。
document.getElementById("divId").scrollIntoView();
比如:
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
<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>
復(fù)制代碼
window.onload = function(){
/*
如果滾動頁面也是DOM沒有解決的一個問題。為了解決這個問題,瀏覽器實現(xiàn)了一下方法,
以方便開發(fā)人員如何更好的控制頁面的滾動。在各種專有方法中,HTML5選擇了scrollIntoView()
作為標準方法。
scrollIntoView()可以在所有的HTML元素上調(diào)用,通過滾動瀏覽器窗口或某個容器元素,
調(diào)用元素就可以出現(xiàn)在視窗中。如果給該方法傳入true作為參數(shù),或者不傳入任何參數(shù),那么
窗口滾動之后會讓調(diào)動元素頂部和視窗頂部盡可能齊平。如果傳入false作為參數(shù),調(diào)用元素
會盡可能全部出現(xiàn)在視口中(可能的話,調(diào)用元素的底部會與視口的頂部齊平。)不過頂部
不一定齊平,例如:
//讓元素可見
document.forms[0].scrollIntoView();
當頁面發(fā)生變化時,一般會用這個方法來吸引用戶注意力。實際上,為某個元素設(shè)置焦點也
會導(dǎo)致瀏覽器滾動顯示獲得焦點的元素。
支持該方法的瀏覽器有 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種方法,第四種是最值得推薦的。