平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 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. salesforce 零基础学习（四十四）实现checkbox列表简单过滤功能

    现在做的项目代码是原来其他公司做的,要在原来基础上业务进行适当调整加上一些CR,其中有一个需要调整的需求如下: 原来使用apex:selectCheckboxes封装了一个checkbox列表,因为数 ...

  2. MyEclipse中屏蔽js检验

    方法一: 右键工程-->properties-->Myeclipse-->validation-->Excluded Resource,勾选需要取消验证的文件或者文件夹就可以了 ...

  3. LR中的时间戳函数web_save_timestamp_param

    以前真没注意过后面看某个群有人说到这个函数一查,还真有,那么处理时间戳就简单很多了,我们经常在各种网站上看到类似于这样的时间戳 51Testing软件测试网"d bLq!uR&am ...

  4. 谈谈service层在mvc框架中的意义和职责

    mvc框架由model,view,controller组成,执行流程一般是:在controller访问model获取数据,通过view渲染页面. mvc模式是web开发中的基础模式,采用的是分层设计, ...

  5. 新作《ASP.NET Web API 2框架揭秘》正式出版

    我觉得大部分人都是“眼球动物“,他们关注的往往都是目光所及的东西.对于很多软件从业者来说,他们对看得见(具有UI界面)的应用抱有极大的热忱,但是对背后支撑整个应用的服务却显得较为冷漠.如果我们将整个“ ...

  6. 使用VS Code开发ASP.NET 5 应用程序

    本文简要地翻译了 https://code.visualstudio.com/Docs/runtimes/ASPnet5 并结合我的实践做了一些说明. 准备工作 1.安装VS Code  https: ...

  7. 你所不知道的15个Axure使用技巧

    你有用原型开发工具吗?如果有,那你用的是Axure还是别的? 从以前就喜欢使用Axure,主要是觉得它能清楚的表达设计的思路,还有交互的真实再现,能让看的人一目了然,昨天看了这篇博文,便更加确定Axu ...

  8. Global eval. What are the options?

    David Flanagan最近写了一个关于全局eval的简单表达式,可以用一行式子表示: var geval = this.execScript || eval; 尽管看起来很简短,但是跨浏览器的兼 ...

  9. 使用css3的动画模拟太阳系行星公转

    本文介绍使用css3的animation画一个太阳系行星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际案例,最后结合css3的clip-path做一 ...

  10. C#开发微信门户及应用(44)--微信H5页面开发的经验总结

    在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页 ...