体验效果：
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. 前端编码规范之CSS

    "字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...

  2. 七天学会ASP.NET MVC（七）——创建单页应用

    系列文章 七天学会ASP.NET MVC (一)——深入理解ASP.NET MVC 七天学会ASP.NET MVC (二)——ASP.NET MVC 数据传递 七天学会ASP.NET MVC (三)— ...

  3. Android Fragment 使用技巧

    1. Fragment 使用时要有一个无参构造函数 如果没有无参构造函数,而是像按照普通类来使用,只创建有参构造函数,则会出现 android.support.v4.app.Fragment$Inst ...

  4. Entity Framework Code First执行SQL语句、视图及存储过程

    1.Entity Framework Code First查询视图 Entity Framework Code First目前还没有特别针对View操作的方法,但对于可更新的视图,可以采用与Table ...

  5. CoreData和SQLite多线程访问时的线程安全

    关于CoreData和SQLite多线程访问时的线程安全问题 数据库读取操作一般都是多线程访问的.在对数据进行读取时,我们要保证其当前状态不能被修改,即读取时加锁,否则就会出现数据错误混乱.IOS中常 ...

  6. javascript运动系列第六篇——轨迹和投掷

    × 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...

  7. 【原创】机器学习之PageRank算法应用与C#实现(1)算法介绍

    考虑到知识的复杂性,连续性,将本算法及应用分为3篇文章,请关注,将在本月逐步发表. 1.机器学习之PageRank算法应用与C#实现(1)算法介绍 2.机器学习之PageRank算法应用与C#实现(2 ...

  8. Snapshot Volume 操作 - 每天5分钟玩转 OpenStack（58）

    Snapshot 可以为 volume 创建快照,快照中保存了 volume 当前的状态,以后可以通过 snapshot 回溯.snapshot 操作实现比较简单,流程图如下: 向 cinder-ap ...

  9. AngularJS之Service（四）

    前言 前面我们讲了控制器.过滤器以及指令,这一节我们来讲讲重大内容之一服务和其中涉及到的工厂. 话题 AngularJS中服务可以说是和DI紧密联系在一起,在应用程序中我们可以通过使用服务来共享代码, ...

  10. mac下安装tomcat

    在window下面搭建tomcat环境很简单,那是因为我们不熟悉mac系统,当我们习惯了命令行的时候,也是so easy,只要通过以下几个步骤就可以解决,本人亲测可用,不会可以留言. 1.进入apch ...