-
首頁
-
網站建設
-
優化推廣
-
案例
方案
方案
Solutions
電商平臺
電商網站開發
E-commerce & System
微信營銷
資訊
我們
我們
About Us
聯系
聯系
Contact Us
-
- 聯系方式
- 業務熱線： 15082661954
- 郵箱： foxl@www.kxlw.net
- 人才招聘
- HR郵箱：
- 190014322@qq.com
精準傳達 ? 價值共享
洞悉互聯網前沿資訊，探尋網站營銷規律
4種方法實現html 頁面內錨點定位及跳轉
作者：狐靈科技 | 2022-05-12 14:49 |點擊：
項目中經常會出現點擊跳轉錨點的方法，比如給一個a標簽一個href=“#錨點”，然后要跳的錨點給個id=“錨點”，這樣就實現簡單的跳轉，但是這樣在url地址欄后面都會出現一個諸如www.geekjc.com/#錨點，然后你點擊給一次后退都是退回上一個選擇的錨點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.getElementById("divId").scrollIntoView();
比如：
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部分
window.onload = function(){
/*
如果滾動頁面也是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種方法，第四種是最值得推薦的。
關于狐靈科技
+狐靈致力于互聯網品牌建設與網絡營銷，專業領域包括 網站建設、 SEO優化、移動互聯網營銷、高端網站建設、高端網站設計、品牌網站定制開發、營銷策劃推廣電子商務、移動互聯網營銷、 為不同類型的客戶提供良好的互聯網應用定制解決方案，我們將策略和執行緊密結合，且不斷評估并優化我們的方案，為客戶提供一體化全方位的互聯網品牌整合方案！
我們的優勢
多項網站設計傳播大獎
營銷型網站建設專家
自主研發網站管理系統
B2C電商網站建設供應商
完善的售后服務體系
我們的不同
+在我們的對手消耗大量的時間停留在碎片化的互聯網設計或者程序實現的時候，我們已經開始把數字化品牌建設和網絡傳播進行了整合。我們提供從前期的網站品牌分析策劃、網站設計、創意表現、系統開發以及后續網站運營反饋建議等一系列服務，幫助企業打造創新的互聯網品牌經營模式與有效的網絡營銷方法,為所有謀求長遠發展的企業品牌貢獻全力！
