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

首先是菜单(锚点)的写法

<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实现页内锚点平滑跳转的更多相关文章

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

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

  2. jQuery实现页内查找相关内容

    当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...

  3. github的markdown页内锚点以及本地资源链接

    页内锚点参考 https://my.oschina.net/antsky/blog/1475173 [aaa](#2-aaabbb) 字母小写,.去掉,空格换成- 本地资源链接 [aaa](docs/ ...

  4. a标签锚点平滑跳转

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

  5. 关于锚点页内链接跳转出现问题(不响应,没有反应)的解决方法(ZT)

    我们知道,利用锚点可以实现页面链接跳转,也可以实现同一页面内的跳转功能. 例如:<a href="somepage.htm>某页面链接</a>  可以跳转链接到som ...

  6. jQuery下锚点的平滑跳转

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

  7. Markdown页内跳转实现方法

    目录 Markdown页内跳转实现方法 HTML锚点跳转 生成目录 Markdown页内跳转实现方法 [时间:2017-02] [状态:Open] [关键词:markdown,标记语言,页内跳转,ht ...

  8. MarkDown技巧:两种方式实现页内跳转

    MarkDown技巧:两种方式实现页内跳转 本人邮箱:JohnTsai.Work@gmail.com,欢迎交流讨论. 欢迎转载,转载请注明网址:http://www.cnblogs.com/JohnT ...

  9. JQuery实现锚点平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...

随机推荐

  1. 获取浏览器的相关信息(navigator)

    * 智能机浏览器版本信息: * */ var browser = { versions: function() { var u = navigator.userAgent + navigator.ap ...

  2. Python-flask中数据库连接池DBUtils

    一.DBUtils DBUtils是Python的一个用于实现数据库连接池的模块. 连接池的三种模式: 第一种模式:             它的缺点:每一次请求反复创建数据库的链接,链接的次数太多 ...

  3. jquery事件优化---事件委托

    假如你有一个表格,里面有大量的td 而你需要做的事就是,给td绑定点击事件函数, 那么多的td,遍历单元格和为每一个单元格绑定事件处理函数将会大大降低代码的性能, 如果让单元格的父元素监听事件,只要判 ...

  4. Java中interface是否继承Object类

    首先我们从C++说起, c++可以多继承.也就是一个类型 --- class,可以继承自2个以上的父类型.多继承导致一个问题,很多人知道.例如,如果类型B,类型C均继承自类型A.然后类型D继承自类型B ...

  5. js中介者模式

    中介者模式(Mediator),用一个中介者对象来封装一系列对象交互.中介者使各对象不需要显示地相互引用,从而使其松散,而且可以独立地改变它们之间的交互. 从生活中例子自然知道,中介者模式设计两个具体 ...

  6. 防止xss,sql攻击函数

    <?php //php防注入和XSS攻击通用过滤. //by qq:831937 $_GET && SafeFilter($_GET); $_POST && Sa ...

  7. java: BufferedReader简单的菜单

    BufferedReader简单的菜单 Menu boolean flag; public Menu() { while(true) { this.show(); } } public void sh ...

  8. nginx Win下实现简单的负载均衡(1)nginx搭建部署

    快速目录: 一.nginx Win下实现简单的负载均衡(1)nginx搭建部署 二.nginx Win下实现简单的负载均衡(2)站点共享Session 三.nginx Win下实现简单的负载均衡(3) ...

  9. 项目管理理论与实践(5)——UML应用(下)

    本篇文章介绍UML的相关知识.参考<UML从入门到精通> 六.状态机视图 1. 概述 状态机视图通过对类对象的生存周期建立模型来描述对象随时间变化的动态行为.状态是给定类的对象的一组属性值 ...

  10. 教你们在cmd里运行打开游戏,效率很快的。喜欢吧?

    第一步安装好的游戏 环境变量 变量值:把刚才复制好粘贴在里面,前面不用删除. 喜欢吧?这招非常好用.