做网站-页面内锚点定位的几种方法

在网站开发过程当中，尤其是前端的一些交互效果，我们会碰到有页面内锚点定位及跳转的需求。这个效果就象书签一样，类似word文档中的目录跳转。实现这种功能我们通常想到的是锚点跳转，那么除此以外还有没有其它方法呢?今天做网站小编和大伙一同来探讨一下...

通常我们说的页面内的内容之间的跳转，一般有以下几中实现方法：

1、锚点定位及跳转

这个比较简单，就是在标签中的href属性指向DIV的具体ID即可。我们通过html代码来看一下。

这个方法，在鼠标点击后网址会有所变化，即网址后面会带上#div1这种后缀标识。

2、通过Jquery 的animate方法来作页面滚动跳转。如以下代码：

注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。

$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。

另外，脚本可以进一步优化，自己来试试

这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。

缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。

3、使用js的srollIntoView方法，直接用:

这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。

总结：

以上列出的几点关于页面中锚点定位及跳转的方法有些是网址会产生变化的，使用JQUERY的animate方法就不会使用网址产生变化，当然你可能也能找到一些写好的Jquery插件来做。做网站小编所说的只是一些最基础的解决办法，期待你的留言分享...

往期热点文章：

#做网站-如何将设计稿还原为网页

#做网站-面向对象面向过程的区别

#做网站-必备的10款网站性能测试工具(推荐)

#做网站-前端工程师都用啥编辑器

#做网站-虚拟主机与独立服务器区别

#做网站-10个CSS简写技巧

#做网站-如何学好面象对象编程

#做网站-怎么学习MySQL(新手)

做网站公众平台（zwangz888）每天为您分享原创Web开发资讯，开发经验，为您的技能充电。期待您的关注与分享，同时欢迎您留言，让我们每天进步一点点！