Javascript实现导航锚点滚动效果实例
本篇文章主要介绍了Javascript实现页面滚动时导航智能定位,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
常见的开发页面中可能会有这么一个需求,页面中会有多个模块,每个模块对应一个导航,当页面滚动到某个模块时,对应的模块导航需要加上一个类用于区分当前用户所浏览区域。
假设结构如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
< p class = "container" > < p class = "wrapper" > < p class = "section" id = "section1" >section1</ p > < p class = "section" id = "section2" >section2</ p > < p class = "section" id = "section3" >section3</ p > < p class = "section" id = "section4" >section4</ p > < p class = "section" id = "section5" >section5</ p > </ p > < nav > < a href = "#section1" rel = "external nofollow" class = "current" >section1</ a > < a href = "#section2" rel = "external nofollow" >section2</ a > < a href = "#section3" rel = "external nofollow" >section3</ a > < a href = "#section4" rel = "external nofollow" >section4</ a > < a href = "#section5" rel = "external nofollow" >section5</ a > </ nav > </ p > |
页面滚动时导航定位
js代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
var $navs = $( 'nav a' ), // 导航 $sections = $( '.section' ), // 模块 $window = $(window), navLength = $navs.length - 1; $window.on( 'scroll' , function () { var scrollTop = $window.scrollTop(), len = navLength; for (; len > -1; len--) { var that = $sections.eq(len); if (scrollTop >= that.offset().top) { $navs.removeClass( 'current' ).eq(len).addClass( 'current' ); break ; } } }); |
效果如下:
不难看出,基本原理就是在window滚动的时候,依次将模块从后向前遍历,如果window的滚动高度大于或等于当前模块的距页面顶部的距离,则将当前模块对应的导航突出显示,并且不再继续遍历
点击导航定位页面
除了这种需求外,还有另一种需求,就是点击导航定位到导航所对应模块的顶部。
代码如下:
1
2
3
4
5
6
|
$navs.on( 'click' , function (e) { e.preventDefault(); $( 'html, body' ).animate({ 'scrollTop' : $($( this ).attr( 'href' )).offset().top }, 400); }); |
效果如下:
Javascript实现导航锚点滚动效果实例的更多相关文章
- ASP.NET中使用JavaScript实现图片自动水平滚动效果
参照网上的资料,在ASP.NET中使用JavaScript实现图片自动水平滚动效果. 1.页面前台代码: <%@ Page Language="C#" AutoEventWi ...
- Flash 开发环境搭建和文字滚动效果实例
Flash 开发环境搭建和文字滚动效果实例 一.Flash 开发环境搭建 Flash发布的时候可以将资源(即将库中的元件)集成到swf运行文件中.Flash没有代码自动输入补全功能,因此需要一个英文一 ...
- 特殊例子--JavaScript代码实现图片循环滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 二、JavaScript语言--JS实践--信息滚动效果制作
运用JavaScript技术,掌握无缝滚动和歇间性滚动的制作方法. 一.marquee标签实现信息滚动 1 behavior滚动的方式 alternate:表示在两端之间来回滚动 scroll:表示由 ...
- jQuery实现页面锚点滚动效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 20 个用于处理页面滚动效果的 jQuery 插件
对设计和开发一个网站来说,web开发者不能低估了网站滚动效果的重要性.如今,设计者们都视为一大挑战了,在网站中设计出吸引眼球的高效视觉滚动效果.幸运的是有各种各样的jquery 滚动插件可供他们使用, ...
- marquee 实现首尾相连循环滚动效果
<marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等 marquee标签不是HTML3.2 ...
- 基于jquery的锚点滚动插件(百度百科效果) anchorScroll.js
1.插进使用场景 请打开https://baike.baidu.com/item/%E6%97%A5%E6%9C%AC%E5%8A%A8%E7%94%BB#hotspotmining,查看百度百科页面 ...
- javascript跟随滚动效果插件代码(javascript Follow Plugin)
这篇文章介绍了javascript跟随滚动效果插件代码(javascript Follow Plugin),有需要的朋友可以参考一下Js 跟随滚动效果插件支持定义多个跟随ID,采用css fixed属 ...
随机推荐
- hdu 1185 状压dp 好题 (当前状态与上两行有关系)
/* 状压dp 刚开始&写成&&看了好长时间T0T. 状态转移方程 dp[i][k][j]=Max(dp[i][k][j],dp[i-1][l][k]+num[i][j]);( ...
- C语言编程规范试题(标准答案)
C语言编程规范试题(标准答案) 一.单选题(每小题3分,共20小题60分) 1.1-1.5 B D A C B 1.6-1.10 C A D B C 1.11 ...
- Win32编程API 基础篇 -- 5.使用资源
使用资源 你可能想参考教程结尾的附近,为了获得跟VC++和BC++资源相关的信息. 在我们讲得更加深入之前,我将大致讲解一下资源的主题,这样在每个小节中我就不必再去重讲一遍了.在这一小节中,你不需要编 ...
- NOIP2011 提高组合集
NOIP 2011 提高组合集 D1 T1 铺地毯 模拟,题目让你干啥你就干啥 #include <iostream> #include <cstdio> using name ...
- UnicodeEncodeError: 'gbk' codec can't encode character '\u2022' in position
在GBK解码时忽略掉不能解码的数据 self.file.write(content.encode("gbk", 'ignore').decode("gbk", ...
- Windows下React Native开发01 -- Android开发环境搭建
1.安装jdk 推荐将JDK的bin目录加入系统PATH环境变量(自己百度下怎么配置). 2.安装SDK 直接安装 Android Studio 推荐从AndroidDevTools下载.(也可以直 ...
- Oracle基础(四)pl/sql
PL/SQL也是一种程序语言,叫做过程化SQL语言(Procedural Language/SQL). PL/SQL是Oracle数据库对SQL语句的扩展.在普通SQL语句的使用上添加了编程语言的特点 ...
- Android实现一个自己定义相机的界面
我们先实现拍照button的圆形效果哈.Android开发中,当然能够找美工人员设计图片,然后直接拿进来.只是我们能够自己写代码实现这个效果哈.最经常使用的的是用layout-list实现图片的叠加, ...
- 适用于app.config与web.config的ConfigUtil读写工具类 基于MongoDb官方C#驱动封装MongoDbCsharpHelper类(CRUD类) 基于ASP.NET WEB API实现分布式数据访问中间层(提供对数据库的CRUD) C# 实现AOP 的几种常见方式
适用于app.config与web.config的ConfigUtil读写工具类 之前文章:<两种读写配置文件的方案(app.config与web.config通用)>,现在重新整理一 ...
- zoj3605 Find the Marble --- 概率dp
n个杯子.球最開始在s位置.有m次换球操作,看到了k次,看的人依据自己看到的k次猜球终于在哪个位置,输出可能性最大的位置. dp[m][k][s]表示前m次操作中看到了k次球终于在s的频率. #inc ...