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标签,否则不能跳转
随机推荐
- day13
今日所学 1,函数的嵌套定义 2,globe nonlocal关键字 3,闭包及闭包的运用场景 4,装饰器 函数的嵌套: 在一个函数的内部定义另一个函数 1,函数2想直接使用1函数的局部变量,可以 ...
- odoo10源码 windows环境安装
odoo10-windows开发环境(源码安装) 安装node 下载地址 http://nodejs.cn/download/ 安装教程https://www.cnblogs.com/zhouyu20 ...
- python——redis
redis简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sor ...
- 网路知识总结(session&&Cookie&&三次握手&&请求头)
1. 请说明Session和Cookie的作用和区别 1) Cookie 存在前端 前端需要拿着cookie访问后端,Session在服务器上(文件,数据库,如Redis) 2) web访问Serve ...
- Wiki leaks files backup
Wiki leaks files backup 来源 http://ftp.icm.edu.pl/packages/incoming/torrent/ Index of /packages/inco ...
- [SMB share]Create SMB share under powershell / poweshell下创建本机的SMB共享
New-SmbShare -Name share-name -Path C:\share -FolderEnumerationMode AccessBased -CachingMode Documen ...
- 【简】题解 AWSL090429 【数塔问题】
因为每次只ban一个点 而且不是永久性的 预处理出每个点从上往下和从下往上的最大值 每次询问直接暴力 被ban掉点那行去掉那点的最大值 也可以直接预处理出每行的最大值和次大值 还有种做法貌似可以过 预 ...
- 几道c/c++练习题
1.以下三条输出语句分别输出什么?[C易] char str1[] = "abc"; char str2[] = "abc"; const char str3[ ...
- SQL server 行转列 列转行
1.简单案例 create database Hang go use Hang create table Students ( Name varchar(50), Kemu varchar(50), ...
- ECharts将折线变平滑和去掉点的属性
eries : [ { name:'your name', symbol:'none', //这句就是去掉点的 smooth:true, //这句就是让曲线变平滑的 type:'line', stac ...