一、创建锚点

<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. varnish与squid缓存效率对比实例

    前提:安装varnish.squid.webbench(压测工具) 注:varnish和squid机都未安装其他多余服务,服务器绑定域名为www.dannylinux.top  (为同一台服务器,测试 ...

  2. git 远程新建分支后,本地查看不到

    使用以下命令同步 git remote # 列出所有远程主机git remote update origin --prune # 更新远程主机origin 整理分支git branch -r # 列出 ...

  3. Capability配置简介

    什么是Capability desired capability的功能是配置Appium会话.他们告诉Appium服务器您想要自动化的平台和应用程序. Desired Capabilities是一组设 ...

  4. 获取SQL数据库中的数据库名、所有表名、所有字段名、列描述

    1.获取所有数据库名:    (1).Select Name FROM Master.dbo.SysDatabases orDER BY Name 2.获取所有表名:    (1).Select Na ...

  5. 记录一次群答问:jmeter正则提取器提取一个及多个值

    图截得比较大,浏览器放大倍数看吧^_^ 前几天,在群里被@,咨询这样一个问题:服务器返回:name="tom"  value="jerry"  要提取出name ...

  6. Docke--Dockerfile指令介绍

    Dockerfile 构建镜像常用指令 Dockerfile 是一个文本文件,其内包含了一条条的指定(Instruction),每一条指令构建一层,因此每一条指定的内容,就是描述该层应当如何构建. 通 ...

  7. windows下提权基础

    拿到webshell很多时候代表渗透的开始,下面带来windows提权基础 环境:虚拟机 win7系统 首先:查看权限whoami 我们知道windows的高权限应该是administrator和sy ...

  8. 把xlsx变成CSV

    import pandas as pd import numpy as np import matplotlib.pyplot as plt #df.to_excel('C:/Users/Asus/D ...

  9. CMakeList.txt(1):cmake error

    cmake_symlink_library: System Error: Operation not supported 1/创建链接不成功,要确认当前帐户下是否有权限在编译的目录中有创建链接的权限 ...

  10. 对filter的初步认识

    Filter 技术是servlet 2.3  新增加的功能.servlet2.3是sun公司 于2000年10月发布的,它的开发者包括许多个人和公司团体,充分体现了sun公司所倡导的代码开放性原则.在 ...