平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 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实现页面内锚点平滑跳转的更多相关文章
-
jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...
-
用JS或jQuery访问页面内的iframe,兼容IE/FF
用JS或jQuery访问页面内的iframe,兼容IE/FF js或者jQuery访问页面中的框架也就是iframe.注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.htm ...
-
用JS或jQuery访问页面内的iframe
用JS或jQuery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的!假设有两个页面,在相同域下.index.html 文件内含有一个iframe: <!DOCTYPE ...
-
a标签锚点平滑跳转
一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...
-
html 页面内锚点定位及跳转方法总结
第一种方法,也是最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head> < ...
-
html页面内锚点定位及跳转方法总结
1.最简单的方法是锚点用<a>标签,在href属性中写入DIV的id.如下: <!DOCTYPE html><html><head><style& ...
-
jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作）
JQuery下锚点的平滑跳转 对于锚点的平滑跳转,在一般的商业性质的网站上,权衡来说,要谨慎使用. 例如:让页面平滑滚动到一个id为box的元素处,则JQuery代码只要一句话,关键位置 如下: $( ...
-
jquery 在页面上根据ID定位（jQuery锚点跳转及相关操作） 经典
1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+nam ...
-
jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...
随机推荐
-
关于JAVA中对字符串与数组求长度的问题
我在学习中发现在求数组或者字符串的长度的时候,用到length的时候,有时候是length,有时候是length(),很是奇怪,于是上API查了一下,发现一些小细节. 首先看看这段代码 public ...
-
Oracle OCI-22053:溢出错误
Oracle 数值数据类型最多可存储 38 个字节的精度.当将 Oracle 数值转换 为公共语言运行库数据类型时,小数点后边的位数可能过多,这会导致此错误. 查询29万笔数据,报此错误,分析应该 ...
-
结对编程1 —— 基于GUI和Swing的四则运算题目生成器
合作伙伴 201421123102 王艳秋 201421123106 陈 雄 代码地址 题目描述 我们在个人作业1中,用各种语言实现了一个命令行的四则运算小程序.进一步,本次要求把这个程序做成GUI( ...
-
PHP全栈学习笔记14
一.搭建PHP开发环境 Apahce服务器 Dreamwear创建站点 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
-
java字符串转为Map类型：split()方法的应用
方法一: package com.thinkgem.jeesite.modules.socketTest.demo2; import java.util.HashMap; import java.ut ...
-
# Writing your first Django app--part 3 about view
添加更多的view 写actually有用的view 使用模版来设计view 使用模版设计view的捷径:render() 抛出异常404 抛出异常404-快捷方法: get_object_or_40 ...
-
Python中的变量引用对象需注意的几点
Python中的变量引用对象需注意的几点 分类:Python (55) (0) 普通引用: Python中,变量的作用仅仅是一个标识,只有赋值后才被创建,它可以引用任何类型的对象,而且在引用之前必须 ...
-
[svc][op]磁盘Inode详解-重要
另一篇白话总结 一.inode是什么 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB ...
-
如何让局域网其他电脑通过IP直接访问自己电脑的网站
具体方法如下: 1. 打开系统的控制面板 2. 打开控制面板后打开window防火墙. 3.点击图中的“高级设置”选项. 4.点击图中的“本地计算机上的高级安全 Windows 防火墙”在右侧点击“W ...
-
Redis实战(六)
查询数据 1.使用Linq匹配关键字查询 using (var redisClient = RedisManager.GetClient()) { var user = redisClient.Get ...