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

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

<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. JAVA学习前十天:小结、面向对象之”扑克牌“例子

    2016年4月26号正式步入JAVA学习课堂,学习了第一节JAVA课程,由于以前有C语言基础,所以课程有点快! 第一天:学习了教材的第一部分,第一部分总共两章,分别是JAVA简介和JAVA基础语法. ...

  2. HDU1565 方格取数(1)

    Problem Description 给你一个n*n的格子的棋盘,每个格子里面有一个非负数.从中取出若干个数,使得任意的两个数所在的格子没有公共边,就是说所取的数所在的2个格子不能相邻,并且取出的数 ...

  3. ionic2——安装Java jdk并配置环境变量

    前言:jdk是 Java 语言的软件开发工具包,它包含了Java 的运行环境,Java 工具和Java 基础的类库.做java web开发,android开发,还有现在流行的混合式App开发,都需要安 ...

  4. Git_学习_07_ 推送修改到远端

    一.操作流程 多人协作时,若自己的本地代码有了修改,想提交自己的代码,就需要按照以下步骤操作: 1.确认修改正确 使用以下命令,查看有哪些是自己未提交的代码 git status 2.拉取远程最新代码 ...

  5. 2018.7.7 MBA -从专业到管理(1)—— 技术人才与的管理人才比较

    目录 1从基层员工到基层管理 专业,专长,专能,受赏识,团结同事 2从 基层管理到中层管理 重点:一专多能, 打造团队, 获取资源,对外沟通 3从中层到高层 重点:战略规划, 选拔人才 , 市场扩展

  6. Codeforces Round #254(div2)A

    很有趣的题.想到了就非常简单,想不到就麻烦了. 其实就是一种逆向思维:最后结果肯定是这样子: WBWBWBWB... BWBWBWBW... WBWBWBWB... ... 里面有“-”的地方改成“- ...

  7. Storm实时计算:流操作入门编程实践

    转自:http://shiyanjun.cn/archives/977.html Storm实时计算:流操作入门编程实践   Storm是一个分布式是实时计算系统,它设计了一种对流和计算的抽象,概念比 ...

  8. poj1463 Strategic game[树形DP]

    求一棵树每条边都被选上的点覆盖掉的最少选点数. 一条边被覆盖掉,必须他父亲和儿子中选一个..这不就是比NOIP2018D2T3还裸的暴力么.水掉. lyd给的练习题都什么**玩意儿.. code不挂了 ...

  9. 「BJOI2018」链上二次求和

    「BJOI2018」链上二次求和 https://loj.ac/problem/2512 我说今天上午写博客吧.怕自己写一上午,就决定先写道题. 然后我就调了一上午线段树. 花了2h找到lazy标记没 ...

  10. Visualforce入门第五篇_2017.3.1

    Visualforce添加过滤器,实现数据的筛选 参考原文:https://trailhead.salesforce.com/modules/visualforce_fundamentals/unit ...