一站式百度SEO排名优化!-找老刘SEO低投入,高转化,精益求精、一丝不苟:旨在提供更好的SEO服务!

首页>>网站建设

[锚点跳转]页面内跳转的锚点设置

首页 2019-12-24 网站建设 73 ℃ Tags: 锚点跳转


首先,来聊聊锚点是什么

你还记得HTML中的a标签吗?


概念:<a>元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接

但严格来说,<a>元素不是一个链接,而是超文本锚点,可以链接到一个新文件、用id属性指向任何元素。如果没有<a>元素没有href属性的话,可以作为原本链接位置的占位符,常用于home链接。


[注意]任何文档流内容都可以被嵌套,只要不是交互内容类别(如按钮、链接等)


href属性表示地址,有三种情况:

1.链接地址

<a href="http://www.baidu.com">百度</a>

2.下载地址

<a href="test.zip">下载测试</a>

3.锚点

(1)href:#id名

<a href="#test">目录</a>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="test" style="height: 200px;width: 200px; border: 1px solid black;margin-bottom: 300px;">内容</div>

(2)href:页面地址#id

<a href="http://baike.baidu.com/view/2202.htm#2">足球比赛规则</a>

注意:href属性不要留空,若暂时不需要写地址,就写#或者JavaScript:;因为如果href留空,会刷新页面


写完这些,大牛们恐怕已经看得很不耐烦,基础不错的小伙伴们应该也恍然大悟了,至于一头雾水的,继续看下面实例吧。


对我描述的需求一头雾水的,不耐烦看的,感兴趣的可以直接复制代码,试一下就明白了,拿走不谢。


一、页面内跳转的锚点设置

    页面内的跳转需要两步:

    方法一:

    ①:设置一个锚点链接<a href="#libai">我是李白</a>;(注意:href属性的属性值最前面要加#)

    ②:在页面中需要的位置设置锚点<a name="libai"></a>;(注意:a标签中要写一个name属性,属性值要与①中的href的属性值一样,不加#)标签中按需填写必要的文字,一般不写内容


    方法二:

    ①:同方法一的①

    ②:设置锚点的位置  <h3 id="libai">我是李白</h3>;在要跳转到的位置的标签中添加一个id属性,属性值与①中href的属性值一样,不加#

    方法二不用单独添加一个a标签来专门设置锚点 ,只在需要的位置的标签中添加一个id即可。

GIF.gif

实例:

    <ul>

        <li><a href="#libai">我是李白</a></li>

        <li><a href="#dufu">我是杜甫</a></li>

        <li><a href="#baijuyi">我是白居易</a></li>

    </ul>

    <a name="libai"></a><!--设置锚点方法1-->

    <h3 id="libai">我是李白</h3><!--设置锚点方法2-->

    <p>我是李白~</p>

    <p>我是李白~</p>

    <p>我是李白~</p>

    <p>我是李白~</p>

    <p>我是李白~</p>

    <p>我是李白~</p>

    <p>我是李白~</p>

    <h3 id="dufu">我是杜甫</h3><!--设置锚点方法2-->

    <a name="dufu"></a>

    <p>我是杜甫~</p>

    <p>我是杜甫~</p>

    <p>我是杜甫~</p>

    <p>我是杜甫~</p>

    <p>我是杜甫~</p>

    <p>我是杜甫~</p>

    <h3 id="dufu">我是白居易</h3><!--设置锚点方法2-->

    <a name="baijuyi"></a>

    <p>我是白居易~</p>

    <p>我是白居易~</p>

    <p>我是白居易~</p>

    <p>我是白居易~</p>

    <p>我是白居易~</p>

    <p>我是白居易~</p>


需要其他特效的可以自行添加JS。比如锚点跳转距离顶部指定距离120像素:

window.onhashchange=function(){

    var target = $(location.hash);

    if(target.length==1){

        var top = target.offset().top-120;// 距离顶部120像素

        if(top > 0){

            $('html,body').animate({scrollTop: top}, 1000);//带jq动画的跳转

           //$('html,body').css({scrollTop: top}) //不带jq动画的跳转

        }

    }

};




当前位置:首页>>网站建设>>[锚点跳转]页面内跳转的锚点设置

搜索
分类
热门标签
  • 首页
  • 电话
  • QQ
  •  
    联系老刘手机
    13524017402
    联系老刘微信
    扫描微信二维码