a标签锚点平滑跳转
一、创建锚点
<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标签锚点平滑跳转的更多相关文章
- jQuery实现页面内锚点平滑跳转
平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有“小尾巴”,就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以 ...
- jQuery实现页内锚点平滑跳转
当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...
- jQuery任意标签锚点跳转插件
// 任意锚点平滑跳转插件// 2010-07-15 v1.0(function($){ $.fn.zxxAnchor = function(options){ var defaults = { ie ...
- jQuery下锚点的平滑跳转
对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...
- JQuery实现锚点平滑滚动
一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a> ...
- <a>标签点击不跳转
HTML中的<a></a>标签点击不跳转的方法 一.<a href="####" ></a> 使用这个方法我们会发现<a hr ...
- 点击<a>标签后禁止页面跳至顶部
一.点击<a>标签后禁止页面跳至顶部 1. 使用 href="javascript:void(0);",例如: <a href="javascript: ...
- a标签点击不跳转的几种方法
a标签点击不跳转的几种方法 1.onclick事件中返回false <a href="http://www.baidu.com" onclick="return f ...
- a标签中可以加button,但是不提倡;button中不能加a标签,否则不能跳转
a标签中可以加button,但是不提倡:button中不能加a标签,否则不能跳转
随机推荐
- A Base Class pointer can point to a derived class object. Why is the vice-versa not true?
问题转载自:https://stackoverflow.com/questions/4937180/a-base-class-pointer-can-point-to-a-derived-class- ...
- Centos7下安装和配置vim
Centos7 最新版本默认已经安装vim,可以使用命令查看是否安装 rpm -qa|grep vim 输出结果如下,如无以下输出结果,则安装vim: vim-filesystem-7.4.160-4 ...
- Java代理模式之Cglib代理
Cglib代理,也叫做子类代理.在内存中构建一个子类对象从而实现对目标对象功能的扩展. CGLIB包的底层是通过使用一个小而快的字节码处理框架ASM,来转换字节码并生成新的类.不鼓励直接使用ASM,因 ...
- Vue.js 2.x笔记:状态管理Vuex(7)
1. Vuex简介与安装 1.1 Vuex简介 Vuex是为vue.js应用程序开发的状态管理模式,解决的问题: ◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题 ◊ 不同状态中 ...
- mysql-笔记-默认值
1 指定列的默认值 columnName int default '-1' 2 integer 列-设置自增列 也是指定默认值的方式 3 默认值必须是常量 不能使用函数.表达式---特例:timest ...
- 获取SQL数据库中的数据库名、所有表名、所有字段名、列描述
1.获取所有数据库名: (1).Select Name FROM Master.dbo.SysDatabases orDER BY Name 2.获取所有表名: (1).Select Na ...
- C语言博客作业05--指针
1.本章学习总结 1.1 思维导图 1.2 本章学习体会及代码量学习体会 1.2.1 学习体会 1.2.2 代码累计 2.PTA总分 2.1截图PTA中函数题目集的排名得分 2.2 我的总分: 3.P ...
- [洛谷P1650] 田忌赛马
贪心难题:总结贪心问题的一般思路 传送门:$>here<$ 题意 田忌和齐王各有n匹马,赛马时一一对应.赢+200,输-200,平+0. 问最多多少钱? 数据范围:$n \leq 2000 ...
- git的命令行输出正确地显示中文文件名
参考:https://stackoverflow.com/questions/22827239/how-to-make-git-properly-display-utf-8-encoded-pathn ...
- Codeforces 1092F Tree with Maximum Cost(树形DP)
题目链接:Tree with Maximum Cost 题意:给定一棵树,树上每个顶点都有属性值ai,树的边权为1,求$\sum\limits_{i = 1}^{n} dist(i, v) \cdot ...