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> ...
随机推荐
- Qt之密码框不可全选、复制、粘贴无右键菜单等
转载---> http://blog.sina.com.cn/s/blog_a6fb6cc90101artk.html 在做用户登录界面的时候,往往会用到密码框,则其中的一些功能也要求与普通的输 ...
- SaaS架构经验总结
2B Saas系统最近几年都很火.很多创业公司都在尝试创建企业级别的应用 cRM, HR,销售, Desk Saas系统.很多Saas创业公司也拿了大额风投.毕竟Saas相对传统软件的优势非常明显. ...
- keystone DB in devstack
~$ mysql -u -p root mysql> use keystone; mysql> show tables;+------------------------+| Tables ...
- Spring Cloud Ribbon实现客户端负载均衡
1.构建microservice-consumer-movie-ribbon项目,在pom.xml中引入ribbon依赖 在引入Eureka依赖的时候,默认里面含有ribbon依赖 2.添加@Load ...
- jsonp 解决跨域传输
JSONP是JSON with Padding的略称.它是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅 ...
- java 如何保证接口的安全性
在开发过程中,肯定会有和第三方或者app端的接口调用.在调用的时候,如何来保证非法链接或者恶意攻击呢? 1.签名 根据用户名或者用户id,结合用户的ip或者设备号,生成一个token.在请求后台,后台 ...
- 如何理解python中的if __name__=='main'的作用
一. 一个浅显易懂的比喻 我们在学习python编程时,不可避免的会遇到if __name__=='main'这样的语句,它到底有什么作用呢? <如何简单地理解Python中的if __name ...
- 神经网络卷积层 要回计算output的维度 input 28 卷积是3x3 则output是26 但是channel是卷积核的数量
model = Sequential() model.add(Conv2D(32, kernel_size=(3, 3), activation='relu', input_shape=input_s ...
- vue项目打包注意的地方
打包有两种方式: 第一种方式:1.更改config文件夹下prod.env.js下的地址: 2.将config文件夹下index.js中build下改为 assetsPublicPath: '', 第 ...
- 项目管理理论与实践(6)——利用Excel制作项目文档的设计技巧
这篇是使用的Excel 2007 进行文档设计,Excel的设计也是一门学问,这里主要介绍一些Excel的设计技巧,后面也会陆续更新该文章. 1. 固定某行某列 首先设计这样的任务管理文档: 现在我想 ...