体验效果：
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. 使用Akka.net开发第一个分布式应用

    系列主题:基于消息的软件架构模型演变 既然这个系列的主题是"基于消息的架构模型演变",少不了说说Actor模型.Akka.net是一个基于Actor模型的分布式框架.如果你对分布式 ...

  2. 旺信UWP正式版发布

    下载链接:https://www.microsoft.com/store/apps/9nblggh5lq9x 各位园主好,在旺信Beta版发布后近两个月,我们的新版本1.1.0终于上线了,并且更名为旺 ...

  3. 剑指Offer面试题：11.打印1到最大的n位数

    一.题目:打印1到最大的n位数 题目:输入数字n,按顺序打印出从1最大的n位十进制数.比如输入3,则打印出1.2.3一直到最大的3位数即999. 二.不同的解法 2.1 不假思索的解法 最容易想到的办 ...

  4. Hadoop学习笔记—12.MapReduce中的常见算法

    一.MapReduce中有哪些常见算法 (1)经典之王:单词计数 这个是MapReduce的经典案例,经典的不能再经典了! (2)数据去重 "数据去重"主要是为了掌握和利用并行化思 ...

  5. [译]Asp.net MVC 之 Contorllers（二）

    URL路由模块 取代URL重写 路由请求 URL路由模块的内部结构 应用程序路由 URL模式和路由 定义应用程序路由 处理路由 路由处理程序 处理物理文件请求 防止路由定义的URL 属性路由 书接上回 ...

  6. 备忘-Android ViewPager 子页监听事件

    @Override public Object instantiateItem(View arg0, int arg1) { ((ViewPager) arg0).addView(mListViews ...

  7. netstat

    netstat再解读 C:\Users\Administrator>netstat -nb 活动连接 协议 本地地址 外部地址 状态 TCP ESTABLISHED [mysqld.exe] T ...

  8. jquery做一些小的特效

    在文本框里输入内容到添加到下拉列表里,移除下拉里的内容 1 <!DOCTYPE html> <html> <head> <meta charset=" ...

  9. Android-Activity-Dialog theme touch outsize

    最近遇到一个蛋疼的问题: 一个Activity,主题设置成 Dialog 然后点击外面要求这个Activity 不能关闭. 这下好了,直接在 style 的 theme 里面加一个属性就好了. 加上去 ...

  10. iOS-App发布证书的申请与使用

    i开发环境:xcode5.1.1 iphonesdk:7.1 开发机器:iMac 真机部署测试:apple个人开发者ID 向导: 必备IDP证书和distribution证书(第一个证书是真机部署测试 ...