一、创建锚点

<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. js 解决两值交换

    总结七种办法来交换a和b的变量值 交换变量值方案一 最最最简单的办法就是使用一个临时变量了 不过使用临时变量的方法实在是太low了 var t; t = a; a = b; b = t;   首先把a ...

  2. java篇 之 java概念

    Jvm:java虚拟机,让java拥有跨平台的能力,一次编写,导出运行 Java优点:提供了一个解释性环境(多线程,可执行程序跨平台,加快开发,支持动态更新) 没有指针,有垃圾将回收器(回收内存) 执 ...

  3. JSP元素介绍

    1.HTML注释 <!--这个HTML注释--> 2.JSP注释 <% --这是JSP注释-- %> 3.声明 用于在页面中定义变量或方法 <% ! String use ...

  4. Nginx-动态添加模块

    Nginx动态添加模块 平滑升级 已经安装好的Nginx动态添加模块 说明: 已经安装好的Nginx,需要添加一个未被编译安装的模块,需要怎么弄呢? 这里已安装第三方nginx-rtmp-module ...

  5. 深入理解JVM(6)——Java内存模型和线程

    Java虚拟机规范中定义了Java内存模型(Java Memory Model,JMM)用来屏蔽掉各种硬件和操作系统的内存访问差异,以实现让Java程序在各种平台下都能达到一致的内存访问效果(“即Ja ...

  6. logstash配置多入多出并互相隔离

    需求:需要利用同一logstash进程采集不同日志,输出到es的不同index,各输入输出隔离: 主要需要解决如下两个问题: 1.如何加载多个配置文件? 普通启动方式:nohup bin/logsta ...

  7. python图形用户

    1)使用GUI 1.GUI:Graphical user interface 2.tkinter:GUI libary for Python自带的库 3.GUI:Example 2)Ubuntu18. ...

  8. PLSQL 报错弹框乱码

    PLSQL Developer下报错信息显示乱码问题 连接环境:win 7 数据库版本:oracle 11g 模拟一个错误,查看错误提示显示"????"乱码问题,如下: 检查: 1 ...

  9. vue-cli 项目踩坑 npm install 时出错

    1.报错如下: 2.此时你执行npm run dev  / npm run build 会报错如下 npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! v ...

  10. 在DOS命令中输入ipconfig /all,出现“该命令不是系统内部命令......”

    第一种情况:1.先去C:\Windows\System32下查找有没有 ipconfig.exe的执行文件,有的话说明系统文件没有丢失,否则要去网上下载一个 ipconfig.exe文件,并放到C:\ ...