a标签跳转锚点到页面指定位置

最新推荐文章于 2024-05-24 11:23:20 发布

Eveweiscsdn

最新推荐文章于 2024-05-24 11:23:20 发布

阅读量3.6w

点赞数 2

分类专栏： css3 html5 文章标签： html 锚点指定位置

本文链接：https://blog.csdn.net/wangweiscsdn/article/details/55100448

版权

css3 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

html5

28 篇文章 1 订阅

订阅专栏

代码如下：

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  οnclick="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);
  });
});