今天在分享一個非常小但是很實用的js效果:頁面快速定位
實現效果:點擊頁面按鈕,即可跳轉到指定位置
話不多少,貼代碼:
<div class="button"><a href="#aaa">我是一個跳轉按鈕</a></div>
跳轉指定位置標籤
<div class="div1" id="aaa"> 這是一個錨點測試</div>
js部分:
<script>
window.location.hash = "#aaa"; // #aaa爲錨點名稱
</script>
貼一個我做小測試的代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>js錨點跳轉測試</title>
<style>
.div1{
border:2px red solid;
background:#FF0;
color:#00F;
}
.button a{
color:#FF8956;
}
</style>
</head>
<body>
<p>我是一個空間站位</p>
<div class="button"><a href="#aaa">我是一個跳轉按鈕</a></div>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<div class="div1" id="aaa"> 這是一個錨點測試</div>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
<p>我是一個空間站位</p>
</body>
<script>
window.location.hash = "#aaa"; // firstAnchor爲錨點名稱
</script>
</html>