a標籤跳轉錨點到頁面指定位置
阿新 • • 發佈：2019-01-06
程式碼如下：
JS方式:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <a onclick="document.getElementById('bb').scrollIntoView()">bb</a> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="aa" name="aa">aaaaaaaaaaa</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="bb" name="bb">bbbbbbbbbb</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="cc" name="cc">ccccccccccc</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="dd" name="dd">dddddddddd</p> </body> </html>
直接根據id或者name屬性:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href=""> </head> <body> <a href="#cc">ccccc</a> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="aa" name="aa">aaaaaaaaaa</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="bb" name="bb">bbbbbbbbb</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="cc" name="cc">cccccccccccccc</p> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> </br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br> <p id="dd" name="dd">dddddddddddd</p> </body> </html>
jquery方法
$(document).ready(function(){
$("button").click(function(){
var scroll_offset = $("p").offset();
var scroll=scroll_offset.top-100;
$("body,html").animate({
scrollTop:scroll //讓body的scrollTop等於pos的top，就實現了滾動
},0);
});
});