jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示

在做项目的过程中碰到的问题，一开始还很顺利，在编写父子导航时出现了问题，经过研究，终于解决。

关于锚点定位，我们通常都是a标签写上#id名字，然后在目标上写上id名字。然而我采用的不是这种，而且利用自定义属性来设置，然后来获取里面的#id。
平滑跳转其实很简单，就是利用jq中animate(),然后计算高度，获取id元素所处的位置
效果如下：

部分代码如下：

$(function () {$('#directory li').click(function () {$('html,body').animate({//90代表页面导航条占据的高度，具体根据需求来改变scrollTop: ($($(this).children().attr('data-cata-target')).offset().top) - 90}, 1000);return false;});
})

导航跟随页面滚动并定位到相应位置导航高亮显示，我们需要先计算出导航条的条数，用length来计算

var num = $('#directory li').length;

然后计算出各个定位位置距离窗口的高度，最后就是让其对应的导航名高亮显示。代码如下：

$(window).scroll(function () {for (i = 0; i < num; i++) {//120是根据具体要求来算的，可改变，这里获取得到各个定位位置距离窗口的高度if ($(document).scrollTop() + 120 >= $('#head' + i).offset().top) {//然后设置高亮$('#directory li .cata').removeClass('cata-on')$('#directory li .cata').eq(i).addClass('cata-on');}}return false;
})

最后完成。

jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示相关推荐

JQuery下锚点的平滑跳转
对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,如下: $("html,body" ...
一个渣渣的随页面滚动改变定位的代码
$(document).ready(function(){var footer = $('.footer');$(window).scroll(function () {var winH = $(wi ...
html 页面怎么自动定位到某个标签,JS如何实现在页面上快速定位（锚点跳转问题）...
本文介绍了JS如何实现在页面上快速定位(锚点跳转问题),分享给大家,具体如下: 1. 锚点跳转简介锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到. 锚点跳转有两种形式: a标 ...
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码
比如想跳到 mao.aspx 的页面的div id="s" 的位置那么只用<a href="mao.aspx#s"> 就可实现跳转到指定位置 ...
彻底解决IOS HTML页面上光标跳行、光标不跟随页面问题
继:修复IOS上滑动HTML界面光标乱跳声明:这里只是说明一种处理方法继上一篇文章,处理IOS滑动时,光标不跟随页面滚动,处理方法是,监听touchmove事件,获取当focus的元素,使之失去光 ...
Jquery实现页面滚动时导航智能定位
页面滚动的时候,侧边辅助导航提示到对应的内容.尤其是对于内容很长的页面很好的一个体验. 借助jquery,可以轻松实现.  <div class=" ...
页面内锚点定位及其跳转
一.前言这篇文章我们来看一个网页中常用的小功能--锚点定位及其跳转.简单理解,这个功能就是点击"目录"中相应的"标题",对应"滚动跳转"到 ...
html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html> <html> <head> & ...
html锚点定位原理,html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用标签,在href属性中写入DIV的id.如下: to div1 to div2 to div3 div1 div2 div3 这种方法的缺点是点击锚点之后,浏览器的 ...

jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示

jq锚点定位平滑跳转和导航跟随页面滚动并定位到相应位置，导航高亮显示相关推荐

最新文章

热门文章