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 ...
随机推荐
- 计蒜客A
联想公司最近要设计一个体现公司文化的 logo.联想的设计师想出了一个方案:先画了一个顶点 O,接着画出以顶点 O 为公共顶点的.夹角为 θ的两条线段 l1 和 l2 其中 l1作为圆 C1的 ...
- Android JNI 本地开发接口
前言 我们为什么要用JNI --> 高效.扩展 高效:Native code效率高,数学运算,实时渲染的游戏上,音视频处理 (极品飞车,opengl,ffmpeg,文件压缩,图片处理-) 扩展: ...
- Redis不同类型方法整合
1 对value操作的命令 exists(key):确认一个key是否存在 del(key):删除一个key type(key):返回值的类型 keys(pattern):返回满足给定patt ...
- 列表边框column-rule
column-rule主要是用来定义列与列之间的边框宽度.边框样式和边框颜色.简单点说,就有点类似于常用的border属性.但column-rule是不占用任何空间位置的,在列与列之间改变其宽度不会改 ...
- table 边框
<table width="100%" border="0" cellpadding="2" cellspacing="0& ...
- 指令的Link函数和Scope
指令生成出的模板其实没有太多意义,除非它在特定的scope下编译.默认情况下,指令并不会创建新的子scope.更多的,它使用父scope.也就是说,如果指令存在于一个controller下,它就会使用 ...
- font-family:“微软雅黑” OR font-family:Microsoft Yahei
sublime对中文编码支持的不好,可以考虑用后者.
- 读书笔记 --TCP :传输控制协议(一)
TCP提供一种面向连接的,可靠的字节流服务. TCP 通过如下方式来提供可靠性: 应用数据被分割成TCP认为最适合发送的数据块. 超时重传机制.TCP发出一个段后,启动一个定时器,等待目的端确认收到这 ...
- C# TimeSpan 计算时间差(时间间隔)
命名空间:System 程序集:mscorlib(在 mscorlib.dll 中) 说明: 1.DateTime值类型代表了一个从公元0001年1月1日0点0分0秒到公元9999年12月31日23点 ...
- postman插件安装教程
第一步: 第二步: 第三步: 这样就可以了. 插件下载链接: http://pan.baidu.com/s/1eRVLMpk 密码: 49vb