jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块。具体做法如下:
首先是菜单(锚点)的写法
<a href="#div1" id="adiv1">菜单1</a>
<a href="#div1" id="adiv2">菜单2</a>
<a href="#div1" id="adiv3">菜单3</a>
其次是内容(锚点指向的模块)的写法
<div id="div1">内容1</div>
<div id="div2">内容2</div>
<div id="div3">内容3</div>
最后是jquery的脚本调用方法
<script src="js/jquery-1.8.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(function(){
$("#adiv1").anchorGoWhere({target:1});
$("#adiv2").anchorGoWhere({target:1});
$("#adiv3").anchorGoWhere({target:1});
});
</script>
$("#adiv...") 是根据id找到锚点(也可以用别的方法找到锚点,这里为了方便采用的id),anchorGoWhere就是锚点跳转的实现方法,里面的target参数为跳转的类型,如果是1,则是纵向的跳转;如果是2,则是横向跳转
jQuery实现页内锚点平滑跳转的更多相关文章
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- jQuery实现页内查找相关内容
当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...
- github的markdown页内锚点以及本地资源链接
页内锚点参考 https://my.oschina.net/antsky/blog/1475173 [aaa](#2-aaabbb) 字母小写,.去掉,空格换成- 本地资源链接 [aaa](docs/ ...
- a标签锚点平滑跳转
一.创建锚点 <div class="header" id="top">//终点标签,添加一个id <a href="#top&qu ...
- 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)
我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a> 可以跳转链接到som ...
- jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...
- Markdown页内跳转实现方法
目录 Markdown页内跳转实现方法 HTML锚点跳转 生成目录 Markdown页内跳转实现方法 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内跳转,ht ...
- MarkDown技巧:两种方式实现页内跳转
MarkDown技巧:两种方式实现页内跳转 本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnT ...
- JQuery实现锚点平滑滚动
一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...
随机推荐
- ajax设置Access-Control-Allow-Origin实现跨域访问
ajax跨域访问 1.jsonp方法,jsonp方法是一种非官方方法,这种方法只支持GET方式, 不如POST方式安全.(即使使用jquery的jsonp方法,type设为POST, 也会自动变为GE ...
- aodh M版本新特性 - Remove eventlet from Aodh in favour of threaded approach
在 Kilo版本, API WSGI application 可以有以下2种部署方式: As a Python command that runs a Werkzeug-based web serve ...
- android不同的按钮一起点击崩溃解决
public class ButtonUtils { private static long lastClickTime; public synchronized static boolean isF ...
- Mybatis_总结_03_用_动态SQL
一.前言 MyBatis 的强大特性之一便是它的动态 SQL.如果你有使用 JDBC 或其它类似框架的经验,你就能体会到根据不同条件拼接 SQL 语句的痛苦.例如拼接时要确保不能忘记添加必要的空格,还 ...
- shell编程-条件判断与流程控制
1.条件判断式 按照文件类型进行判断: 两种判断格式: test -e /root/install.log [ -e /root/install.log ] 判断命令是否正确执行: [ -d /roo ...
- POJ--1094--Sorting It All Out||NYOJ--349--Sorting It All Out(拓扑排序)
NYOJ的数据水一点,POJ过了是真的过了 /* 拓扑排序模板题: 每次输入都要判断有环与有序的情况,如果存在环路或者已经有序可以输出则跳过下面的输入 判断有序,通过是否在一个以上的入度为0的点,存在 ...
- 导入的Android项目出现红色感叹号
[原因] 项目中存在导入包,在项目导入之后,classpath指向的包路径出现错误,即需要重新Bulidpath [解决方式] 右键项目名称 BuildPath —> Configure B ...
- HihoCoder1181欧拉路(Fleury算法求欧拉路径)
描述 在上一回中小Hi和小Ho控制着主角收集了分散在各个木桥上的道具,这些道具其实是一块一块骨牌. 主角继续往前走,面前出现了一座石桥,石桥的尽头有一道火焰墙,似乎无法通过. 小Hi注意到在桥头有一张 ...
- loj 6084.「美团 CodeM 资格赛」跳格子
题目: link 题解: 尽量走\(a\). 只要保证走\(a\)后到达的点一定可以到终点就可以走. 所以从终点开始\(dfs\)出所有能够到达终点的点. 然后再从起点开始\(dfs\)路径即可. 如 ...
- 洛谷 P1655 小朋友的球
题目描述 @发源于 小朋友最近特别喜欢球.有一天他脑子抽了,从口袋里拿出了N个不同的球,想把它们放到M个相同的盒子里,并且要求每个盒子中至少要有一个球,他好奇有几种放法,于是尝试编程实现,但由于他天天 ...