JS實現頁面快速定位

今天在分享一個非常小但是很實用的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>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章