体验效果：
http://hovertree.com/texiao/jquery/49/

效果图：

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1" />

<title>jQuery锚点滚动导航菜单 - 何问起</title>

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/49/css/reset.css">

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/49/css/menu.css">

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>

<script type="text/javascript" src="http://hovertree.com/texiao/jquery/49/js/menu.js"></script>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#item1" class="cur">One</a></li>

<li><a href="#item2">Two</a></li>

<li><a href="#item3">Three</a></li>

<li><a href="#item4">Four</a></li>

<li><a href="#item5">Five</a></li>

</ul>

</div>

<div id="content">

<div class="item" id="item1">

<h1>1F</h1>

<h1>jQuery锚点滚动导航菜单</h1>

<a href="http://hovertree.com/h/bjaf/2slij8q4.htm" target="_blank">原文</a>

<a href="http://hovertree.com" target="_blank">首页</a>

<a href="http://hovertree.com/texiao/" target="_blank">特效</a>

<br />请点击右侧导航或 滚动鼠标 看看效果。

</div>

<div class="item" id="item2">

<h1>2F</h1>

</div>

<div class="item" id="item3">

<h1>3F</h1>

<img src="http://hovertree.com/hvtimg/bjafjd/070joeh7.jpg" />

</div>

<div class="item" id="item4">

<h1>4F</h1>

<img src="http://hovertree.com/hvtimg/bjafjd/hs6oi257.jpg" alt="战斗" />

</div>

<div class="item" id="item5">

<h1>5F</h1>

<img src="http://hovertree.com/hvtimg/bjafjd/xusm0re6.jpg" alt="美女" />

</div>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/2slij8q4.htm

参考：hovertree.com/code/jquery/nqgp4xcl.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery页面滚动右侧浮动导航切换的更多相关文章

  1. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  3. jQuery页面滚动监听事件及高级效果插件

    jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scrol ...

  4. jQuery左侧图片右侧文字滑动切换代码

    分享一款jQuery左侧图片右侧文字滑动切换代码.这是一款基于jQuery实现的列表图片控制图片滑动切换代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div cla ...

  5. jquery页面滚动到指定id

    //jquery页面滚动到指定id  $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html ...

  6. jquery 页面滚动tab自动定位，tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  7. jquery 页面滚动到底部自动加载插件集合

    很多社交网站都使用无限滚动的翻页技术来提高用户体验,当你页面滑到列表底部时候无需点击就自动加载更多的内容.下面为你推荐 10 个 jQuery 的无限滚动的插件: 1. jQuery ScrollPa ...

  8. 【吉光片羽】js横向滚动与浮动导航

    1.横向滚动,这个方法是见过最简洁的了. #demo { background: #FFF; overflow: hidden; border: 1px dashed #CCC; width: 117 ...

  9. jquery页面滚动，菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

随机推荐

  1. [译]MVC网站教程（四）：MVC4网站中集成jqGrid表格插件（系列完结）

    目录 1.   介绍 2.   软件环境 3.   在运行示例代码之前(源代码 + 示例登陆帐号) 4.         jqGrid和AJAX 5.         GridSettings 6.  ...

  2. [译] 理解数组在 PHP 内部的实现（给PHP开发者的PHP源码-第四部分）

    文章来自:http://www.hoohack.me/2016/02/15/understanding-phps-internal-array-implementation-ch 原文:https:/ ...

  3. 【转载】十步完全理解SQL

    很多程序员视 SQL 为洪水猛兽.SQL 是一种为数不多的声明性语言,它的运行方式完全不同于我们所熟知的命令行语言.面向对象的程序语言.甚至是函数语言(尽管有些人认为 SQL 语言也是一种函数式语言) ...

  4. 【数据结构】平衡二叉树—AVL树

    (百度百科)在计算机科学中,AVL树是最先发明的自平衡二叉查找树.在AVL树中任何节点的两个子树的高度最大差别为一,所以它也被称为高度平衡树.查找.插入和删除在平均和最坏情况下都是O(log n).增 ...

  5. Redhat环境下编译安装Google Bazel

    Redhat环境下编译安装bazel 作者:Jack47 目前Google Bazel没有提供各个操作系统下的二进制安装包,只提供源代码,需要我们自己编译安装,详情可以见我翻译的中文版Google B ...

  6. xamarin UWP中MessageDialog与ContentDialog的区别

    MessageDialog与ContentDialog的异同点解析: 相同点一:都是uwp应用上的一个弹窗控件.都能做为弹出应用. 相异点一:所在命名空间不同,MessageDialog在Window ...

  7. Objective-C三方库: ZXEasyCoding

    对FastCoding做了二次封装, 实现更加便捷的存储和读取数据, 分享给大家 ZXEasyCoding 说明: 对FastCording进行封装, 更便捷存储和读取对象数据 安装: 添加ZXEas ...

  8. Android开发学习之路-LruCache使用和源码分析

    LruCache的Lru指的是LeastRecentlyUsed,也就是近期最少使用算法.也就是说,当我们进行缓存的时候,如果缓存满了,会先淘汰使用的最少的缓存对象. 为什么要用LruCache?其实 ...

  9. CI Weekly #3 | 关于微服务、Docker 实践与 DevOps 指南

    CI Weekly 围绕『 软件工程效率提升』 进行一系列技术内容分享,包括国内外持续集成.持续交付,持续部署.自动化测试. DevOps 等实践教程.工具与资源,以及一些工程师文化相关的程序员 Ti ...

  10. C#设计模式-模板方法模式

    提到模板,大家肯定不免想到生活中的“简历模板”.“论文模板”.“Word中模版文件”等,在现实生活中,模板的概念就是——有一个规定的格式,然后每个人都可以根据自己的需求或情况去更新它,例如简历模板,下 ...