体验效果：
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. Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4

    Creating a Clean, Minimal-Footprint ASP.NET WebAPI Project with VS 2012 and ASP.NET MVC 4 Building O ...

  2. 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装

    辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班太难请个病 ...

  3. 提供程序不支持 DatabaseExists

    如果Oracle CodeFirst模式下要用EFProviderWrapperToolkit,那么会报告以下错误: 提供程序不支持 DatabaseExists. 这个错误是因为Oracle Cod ...

  4. C# BS消息推送 SignalR Hubs环境搭建与开发（二）

    1. 前言 本文是根据网上前人的总结得出的. 环境: SignalR2.x,VS2015,Win10 2. 开始开发 1)新建一个MVC项目,叫做SignalRDemo 2)安装SignalR包 In ...

  5. Atitit 设计模式的本质思考】

    Atitit 设计模式的本质思考] 1. 世界就是有模式构建的1 1.1. 多次模式与偶然模式1 1.2. 模式就是在一种场合下对某个问题的一个解决方案."1 1.3. 模式需要三样东西.  ...

  6. 使用 fixed role 授予权限

    今天下午,Leader 发mail给我,要求授予某个User对数据库只读的权限. Step1,在SQL Server中为该用户创建一个Login和User,在创建User时,建立Login 和 Use ...

  7. EF-DbUpdateException--实体类和数据库列不对应的解决方案

    错误信息 1.VS实体类里面的字段 2数据库里面的字段 猜测是因为字段数不匹配导致的 3删除多余字段 5.结果 错误信息贴上: -------------------------Log_Header- ...

  8. 转帖：DotNet 资源大全中文版

    (注:下面用 [$] 标注的表示收费工具,但部分收费工具针对开源软件的开发/部署/托管是免费的) API 框架 NancyFx:轻量.用于构建 HTTP 基础服务的非正式(low-ceremony)框 ...

  9. CSS中div覆盖另一个div

    将一个div覆盖在另一个div上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 <htm ...

  10. jsp实现邮件的发送

    如果程序出现 454 Authentication failed, please open smtp flag first! 错误,那么一般是邮箱没有开通POP3/SMTP服务,登录邮箱,在设置中开启 ...