一、创建锚点

<div class="header" id="top">//终点标签,添加一个id

<a href="#top" class="fixed_top_a">^</a>//a标签href添加#id

锚点跳转很生硬,很不友好,找了两种平滑的跳转方法

二、平滑跳转

$('a[href*=#],area[href*=#]').click(function () {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
}); https://blog.csdn.net/u012011360/article/details/78972858//原文链接
$(".fixed_btn").click(function () {

    $("html, body").animate({scrollTop: $($(this).attr("href")).offset().top -20+ "px"}, 500);

    return false;

});

https://blog.csdn.net/never_tears/article/details/53377123//原文链接

a标签锚点平滑跳转的更多相关文章

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

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

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

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

  3. jQuery任意标签锚点跳转插件

    // 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...

  4. jQuery下锚点的平滑跳转

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

  5. JQuery实现锚点平滑滚动

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

  6. <a>标签点击不跳转

    HTML中的<a></a>标签点击不跳转的方法 一.<a href="####" ></a> 使用这个方法我们会发现<a hr ...

  7. 点击<a>标签后禁止页面跳至顶部

    一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...

  8. a标签点击不跳转的几种方法

    a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...

  9. a标签中可以加button,但是不提倡;button中不能加a标签,否则不能跳转

    a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转

随机推荐

  1. linux的dd命令

    一.dd命令的解释 dd:用指定大小的块拷贝一个文件,并在拷贝的同时进行指定的转换. 注意:指定数字的地方若以下列字符结尾,则乘以相应的数字:b=512:c=1:k=1024:w=2 参数注释: 1. ...

  2. 2019-04-05 Spring Boot学习记录

    1. 使用步骤 ① 在pom.xml 增加父级依赖(spring-boot-starter-parent) ② 增加项目起步依赖,如spring-boot-starter-web ③ 配置JDK版本插 ...

  3. 浅谈kafka streams

    随着数据时代的到来,数据的实时计算也越来越被大家重视.实时计算的一个重要方向就是实时流计算,目前关于流计算的有很多成熟的技术实现方案,比如Storm.Spark Streaming.flink等.我今 ...

  4. 命令行中的python一行流

    优点是比那些古怪的脚本要易读 python -c 'import os, sys; [os.rename(a, a[0].upper()+a[1:]) for a in sys.argv[1:]]' ...

  5. chrome主页篡改解决方法

    网上有一个超级细致的小白教学连接,但是发现很难找到,分享一下:https://arlenluo.github.io./2017/03/12/DefeatYourBrowser 还有一种情况是要打开 & ...

  6. [ZJOI2019]线段树(线段树)

    看到这题,首先想到将求和转期望,即每次操作进行概率为1/2,求节点打标记概率. 首先对于每次区间修改操作,对节点进行分类: 1.这个点和其父亲都和修改区间无交,这种情况可以无视. 2.这个点和修改区间 ...

  7. Linux 配置代理

    在我们账号的home那有一个.bashrc文件,用来设置一些开机运行的bash命令 cd ~ ls -a vi .bashrc 我们可以在这里添加代理 export http_proxy=" ...

  8. Tomcat系列(9)——Tomcat 6方面调优(内存,线程,IO,压缩,缓存,集群)

    核心部分 内存 线程 IO 压缩 缓存 集群 一.JVM内存优化 Tomcat内存优化,包括内存大小,垃圾回收策略. Windows 下的catalina.bat,Linux 下的catalina.s ...

  9. PowerEdge R430 机架式服务器安装( Ubuntu server 14.04.1 、PHP5.5.9、PHP-redis2.8、Phalcon3.1)

    未解决问题:换成静态路由的话,怎么就 apt-get udpate 出现错误信息! 解决办法:么有设置网关 一.Ubuntu 系统下载地址: https://certification.ubuntu. ...

  10. 【Unity】透明度渐变

    写给美术大佬的脚本,还要继续改,github地址:TransEffect[github] 效果图如下: Ver.1源码,针对3d Object: using System.Collections; u ...