平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。

效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htm

HTML文件代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>jQuery实现页面内锚点平滑跳转-柯乐义</title><base target="_blank" />

<style type="text/css">

#hovertree {

height: 800px;

background: red;

text-align:center;color:white;

}  

#keleyi {

height: 800px;

background: green;text-align:center;color:white;

}  

#myslider {

height: 800px;

background: black;text-align:center;color:white;

}  

#zonemenu {

height: 800px;

background: yellow;text-align:center;

}  

.keleyilink{position:fixed;}

.keleyilink a {text-decoration:none;}

</style>

</head>

<body>

<div class="keleyilink">

<a href="javascript:scroll('hovertree');" target="_self">HoverTree</a>

<a href="javascript:scroll('keleyi');" target="_self">柯乐义</a>

<a href="javascript:scroll('myslider');" target="_self">myslider</a>

<a href="javascript:scroll('zonemenu');" target="_self">ZoneMenu</a>

</div>

<div id="hovertree">hovertree

<br /><br /><br /><a href="http://keleyi.com/a/bjae/jrdfulnx.htm">原文</a> <a href="http://keleyi.com">柯乐义</a> <a href="http://hovertree.com">HoverTree</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a>

</div>

<div id="keleyi">keleyi</div>

<div id="myslider">myslider</div>

<div id="zonemenu">zonemenu</div>

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

<script src="http://keleyi.com/keleyi/phtml/jqtexiao/37/jquery.hovertreescroll.js"></script>

<script>

function scroll(id) {

$("#" + id).HoverTreeScroll(1000);

}

</script>

</body>

</html>

http://www.cnblogs.com/jihua/p/webfront.html

jQuery实现页面内锚点平滑跳转的更多相关文章

  1. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  2. 用JS或jQuery访问页面内的iframe,兼容IE/FF

    用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...

  3. 用JS或jQuery访问页面内的iframe

    用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...

  4. a标签锚点平滑跳转

    一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...

  5. html 页面内锚点定位及跳转方法总结

    第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...

  6. html页面内锚点定位及跳转方法总结

    1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...

  7. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）

    JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...

  8. jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典

    1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...

  9. jQuery下锚点的平滑跳转

    对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...

随机推荐

  1. MySQL数据库的安装与密码配置

                      MySQL是由MySQL AB公司开发,后由Oracle公司收购     MySQL是一个关系型数据库管理系统       分为社区版和企业版            ...

  2. jQuery 2.0.3 源码分析 回调对象 - Callbacks

    源码API:http://api.jquery.com/jQuery.Callbacks/ jQuery.Callbacks()是在版本1.7中新加入的.它是一个多用途的回调函数列表对象,提供了一种强 ...

  3. 轻量级前端MVVM框架avalon - ViewModel

    废话说了大几篇,我们开始来点干货了~ ViewModel的内部机制 在MVVM中,数据是核心.而jQuery则以DOM为核心. 而DOM只是HTML在JS的世界的抽象,是一个很易变的东西.因此如果业务 ...

  4. Effective Modern C++ 42 Specific Ways to Improve Your Use of C++11 and C++14

    Item 1: Understand template type deduction. Item 2: Understand auto type deduction. Item 3: Understa ...

  5. MongoDB学习系列(2)--使用PHP访问MongoDB

    第一部分:介绍 在Windows上安装最新MongoDB步骤非常的简单,这里不做介绍.但是如果你安装的时候没有将MongoDB作为服务运行,每次你都要使用cmd切换到指定的目录下,然后在cmd中启动M ...

  6. objective-c 语法快速过（7）编译器特性ARC

    ARC(是编译器特性) ARC是自iOS 5之后增加的新特性,完全消除了手动管理内存的烦琐,编译器会自动在适当的地方插入适当的retain.release.autorelease语句.你不再需要担心内 ...

  7. Android 数据库框架OrmLite的使用（一）

    在这里记录下最基本的用法,官网上可了解相关的介绍. 1.下载OrmLite jar 在下载android的:ormlite-android-4.48.jar和ormlite-core-4.48.jar ...

  8. 微信小程序开发初体验

    微信小程序上线几天了,趁着周末补了一下JS,然后今天参照文档和教程写了个小demo 文档地址       教程地址 看文档就看了一点时间,因为以前没接触过JS框架,但是接触过PHP框架= = ,所以理 ...

  9. Android TextView中显示图片

    Android官方给我们提供的Html类下面的fromHtml方法 当你需要转换的HTML代码是带图片的,比如<IMG/>,那么你就需要使用到重载的第二个方法了,这个方法里面有个Image ...

  10. iOS滤镜实现之LOMO（美图秀秀经典LOMO）

    LOMO追求鲜艳色彩,随意.自由的态度,是一种经常使用的滤镜,今天介绍一下iOS 中LOMO滤镜的实现 首先它有3张输入图像 1.我们要处理的图像.即我们要应用LOMO滤镜的图像 2 3 在gpuim ...