首页>>前端开发

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

首页 2019-12-24 前端开发 2589 ℃Tags: 锚点跳转

首先，来聊聊锚点是什么。

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

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

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

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

href属性表示地址，有三种情况：

1.链接地址

2.下载地址

3.锚点

(1）href:#id名

（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即可。

实例：

<ul>

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

</ul>

<h3 id="dufu">我是白居易</h3>

<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动画的跳转

}

};