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标签,否则不能跳转
随机推荐
- 深入了解servlet
一.web项目结构 |- WebRoot : web应用的根目录 |- 静态资源(html+css+js+image+vedio) |- W ...
- Python openpyxl : Excel 文档简单操作
安装方法 使用 pip 或通过专门python IDE(如pyCharm)进行安装 其中pip安装方法,命令行输入: pip install openpyxl 基本使用 第一步先是要导入 openp ...
- 简单实现SSO
方案一:原理:基于SSO Server 端的登录情况,跳转至SOO-client的各个端. 每次返回一个 ticker 随机票据值识别. 配置服务端 执行 :git clone https://git ...
- 关于mysql 自定义@row的使用
应用场景:在对成绩或者积分排名时,往往需要显示排名; 成绩排名:相同分数的人,名次相同 Select s.Score, case when @rowtotal = s.Score then cast( ...
- fastclick原理剖析及其用法
移动端点击延迟事件 移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟. 原因: 移动端的双击会缩放导致click判断延迟.这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件, ...
- youtube上一些随手就来的牛逼颜色
网页背景色: 白色背景 #f6f5f7:替代了原来的纯白,不那么刺眼,很和谐 黑色背景 #262626:一种很好看的黑色背景 其他颜色: 圆形边框线:#ddd;
- [wikichip]zen架构图
https://en.wikichip.org/wiki/amd/microarchitectures/zen https://en.wikichip.org/wiki/amd/microarchit ...
- crontab语法
* * * * * command minute hour day month week ...
- windows类似grep的命令——findstr
windows类似grep的命令——findstr 使用Chrome发现访问google总是向香港那边跳转,估计配置文件中google网站映射的地址是www.google.com.hk,便想着改配 ...
- 【实用Windows双系统一键备份还原工具】Winclone Pro for Mac
[简介] 今天和大家分享最新的 Winclone Pro 7.3.3 Mac 版本,这是一款Mac上强大易用的Windows分区备份还原工具,类似于Windows上的一键Ghost,能够将 PC 上的 ...