a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果。
<a href="#my">我是跳转到div</a>
<div id="my"></div>
<script>
$(function(){
//锚点跳转滑动效果
$('a[href*=#],area[href*=#]').click(function() {
console.log(this.pathname)
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-50;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
})
</script>
a 锚点跳转滑动效果的更多相关文章
- 给锚点a标签添加滑动效果
a标签是前端必用之一,但是a标签点击后马上跳到了href属性值处,有时候要达到滑动效果就要自己添加JavaScript 普通的a标签代码写好之后,在js脚本内加上 $("a").c ...
- 各种HTML锚点跳转方式
1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...
- html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- [学习总结]3、Android---Scroller类(左右滑动效果常用的类)
参考资料:http://blog.csdn.net/vipzjyno1/article/details/24592591 非常感谢这个兄弟! 在android学习中,动作交互是软件中重要的一部分,其中 ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- Android Scroll分析——滑动效果产生
相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件
bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...
- Android实现多页左右滑动效果,支持子view动态创建和cache
要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...
随机推荐
- ASP.NET Identity - LockoutEnabled
LockoutEnabled 并不是想象中的 用户是否 锁定. 而是 LockoutEnabled 标示 登陆是否此用户要检查 LockoutEndDateUtc字段. 如果为true则判断Locko ...
- Node.js的特点
作为后端JavaScript的运行平台,Node保留了前端JavaScript中些熟悉的接口,没有改写语言本身的任何特性,依旧基于作用域和原型链,区别在于它将前端中广泛应用的思想作用到了服务器端.下面 ...
- [转]8年javascript知识点积累
http://www.cnblogs.com/tylerdonet/p/5543813.html
- cms 常用标签
{template "content","header"} 调用根目录下phpcms\template\content\header文件 {CHARSET} 字 ...
- 戴尔3542安装ubuntu时出现:failed to lead ldlinux.c32
解决办法: 1. 开机未进入系统是连续敲击F2,进入BIOS2.在 BIOS 的Boot菜单下,将Secure Boot 改为 Disabled3. 将Boot List Option 改为 Lega ...
- GetKeyboardType获取键盘类型(通过键盘可初步判断用户使用的是台式电脑还是笔记本电脑)
函数功能:该函数获取系统当前键盘的信息. int WINAPI GetKeyboardType( __in int nTypeFlag ); 参数说明:nTypeFlag:指定要获取的键盘信息的类型, ...
- Cassandra 键空间(keyspace),表(table)
查看用户下信息: describe cluster; desc cluster; 查看所有keyspace: describe keyspaces; desc keyspaces; 查看key ...
- 移动设备如何打开RMS加密的文档
关键字:RMS. AZure RMS.IPhone.Android.Office365.Sharepoint.Exchange 最近总是碰到要求用苹果手机及安卓手机阅读RMS加密文档的需求,经过查找相 ...
- iOS 推送小记
ios做推送功能时,最烦得就是各种证书的问题,以前自己做的时候经常要反复搞那些证书搞好几遍才能成功,现在发现归根到底都是appid这个东西搞错了,做个笔记记下来,以免忘了. 首先是程序里面注册推送的变 ...
- 删除txt文件每行第一(n)个空格前内容的方法
1. 把要处理的文本保存在a.txt文件中 2. 在相同文件夹中新建一个xx.txt文件,输入下面代码,再把文件名改为xx.bat. @echo offset fn=a.txt(for /f &quo ...