页面内跳转的锚点设置

来来来，我们来聊聊项目的新需求。
一个团队介绍页面，初始展现为全部人员，标题分为全部成员和创作团队，行政团队等。
点击创作团队时，要求在当前页面跳转到创作团队，点击全部成员时跳转到第一行人员介绍处。
我的初始思路是获取每个团队人员介绍的位置，触发点击事件时，可以跳转到相应位置。然后就开始各种查资料，试图用各种方法解决这个平滑滑动的效果。
两个小时过去了，各种配置各种安装，写了N个bug之后，无奈求助，发现，思路错了！
有个非常简单的方法可以实现这个效果。
那就是 HTML5 的锚点。

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

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

概念：元素 (或HTML锚元素, Anchor Element)通常用来表示一个锚点/链接。
但严格来说，元素不是一个链接，而是超文本锚点，可以链接到一个新文件、用id属性指向任何元素。如果没有元素没有href属性的话，可以作为原本链接位置的占位符，常用于home链接。

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

href属性表示地址，有三种情况：
1.链接地址

百度

2.下载地址

下载测试

3.锚点
(1）href:#id名

目录




















内容

（2）href:页面地址#id名

足球比赛规则

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

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

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

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

    页面内的跳转需要两步：

    方法一：

    ①：设置一个锚点链接我是李白；（注意：href属性的属性值最前面要加#）

    ②：在页面中需要的位置设置锚点；（注意：a标签中要写一个name属性，属性值要与①中的href的属性值一样，不加#）标签中按需填写必要的文字，一般不写内容

    方法二：

    ①：同方法一的①

    ②：设置锚点的位置  
我是李白
；在要跳转到的位置的标签中添加一个id属性，属性值与①中href的属性值一样，不加#

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

实例：

    
    


    

        
我是李白
        
我是杜甫
        
我是白居易
    

    
    
我是李白

    
我是李白~
    
我是李白~
    
我是李白~
    
我是李白~
    
我是李白~
    
我是李白~
    
我是李白~


    
我是杜甫

    
    
我是杜甫~
    
我是杜甫~
    
我是杜甫~
    
我是杜甫~
    
我是杜甫~
    
我是杜甫~


    
我是白居易

    
    
我是白居易~
    
我是白居易~
    
我是白居易~
    
我是白居易~
    
我是白居易~
    
我是白居易~