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标签,否则不能跳转
随机推荐
- JS学习笔记:(一)浏览器页面渲染机制
浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...
- 一、操作m'y's'ql
一.创建framework框架的控制台默认不支持mysql
- Nginx HTTP框架提供的其它变量
L74
- package---包
一,包 包(package) 用于管理程序中的类,主要用于解决类的同名问题.包可以看成目录. 包的作用: [1] 防止命名冲突. [2] 允许类组成一个单元(模块),便于管理和维护 [3] 更好的保护 ...
- nginx 详细配置
Nginx全局变量 Nginx中有很多的全局变量,可以通过$变量名来使用.下面列举一些常用的全局变量: 变量 说明 boxClass 需要执行动画的元素的 变量 说明 $args 请求中的参数,如ww ...
- Oracle字符串行拆分成列的三种方式
Oracle字符串行拆分成列的三种方式 --muphy 开发过程中经常会遇到将前台多个值用逗号连接一同传递到后台查询,这个用逗号连接的字符串分隔的每个字符串分别对应Oracle数据库表的不同行. 如下 ...
- 记录一次群答问:jmeter正则提取器提取一个及多个值
图截得比较大,浏览器放大倍数看吧^_^ 前几天,在群里被@,咨询这样一个问题:服务器返回:name="tom" value="jerry" 要提取出name ...
- [BJOI2019]奥术神杖
https://www.luogu.org/problemnew/show/P5319 题解 首先观察我们要求的答案的形式: \[ \biggl(\prod V_i \biggr)^x\ \ \ x= ...
- 【caffe】caffe在linux环境下的安装与编译
网上的caffe的安装教程繁杂而散乱,对初学者很不友好,尤其对该框架理解不深的童鞋.总的来说,caffe的安装不外乎几个固定的步骤,对每一步有了一定的理解,安装只是time-consuming的问题! ...
- Synchronized与ReentrantLock区别总结(简单粗暴,一目了然)
这篇文章是关于这两个同步锁的简单总结比较,关于底层源码实现原理没有过多涉及,后面会有关于这两个同步锁的底层原理篇幅去介绍. 相似点:这两种同步方式有很多相似之处,它们都是加锁方式同步,而且都是阻塞式的 ...