点击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 锚点跳转滑动效果的更多相关文章

  1. 给锚点a标签添加滑动效果

    a标签是前端必用之一,但是a标签点击后马上跳到了href属性值处,有时候要达到滑动效果就要自己添加JavaScript 普通的a标签代码写好之后,在js脚本内加上 $("a").c ...

  2. 各种HTML锚点跳转方式

    1 js控制锚点跳转 <a name="anchor"></a> location.hash="anchor"; 不只有a其他元素也可以 ...

  3. html锚点的作用和js选项卡锚点跳转的使用

    location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...

  4. [学习总结]3、Android---Scroller类(左右滑动效果常用的类)

    参考资料:http://blog.csdn.net/vipzjyno1/article/details/24592591 非常感谢这个兄弟! 在android学习中,动作交互是软件中重要的一部分,其中 ...

  5. HTML meta锚点跳转 小tips

    小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/

  6. Android Scroll分析——滑动效果产生

    相对于在Android2.x版本上出现的长按.点击事件的效果,不得不说,滑动操作具有更好的用户体验.因此,从Android 4.X版本开始,出现了更多滑动操作的效果.越来越多第三方应用模仿这样的效果, ...

  7. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. bootstrap实现 手机端滑动效果,滑动到下一页,jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  9. Android实现多页左右滑动效果,支持子view动态创建和cache

    要实现多页滑动效果,主要是需要处理onTouchEvent和onInterceptTouchEvent,要处理好touch事件的子控件和父控件的传递问题. 滚动控制可以利用android的Scroll ...

随机推荐

  1. 【转】Win8下安装SQL Server 2005无法启动服务

    安装了Windows8,但是发现不支持Sql Server 2005的安装.网上找了很多办法,基本上都有缺陷.现在终于找到一种完全正常没有缺陷的办法了,和大家分享一下. 1.正常安装任一版本的SQL ...

  2. aix磁盘分区挂载问题

    aix在进行磁盘分区挂载时,可能会报错

  3. 转载:谈谈Unicode编码,简要解释UCS、UTF、BMP、BOM等名词

    转载: 谈谈Unicode编码,简要解释UCS.UTF.BMP.BOM等名词 这是一篇程序员写给程序员的趣味读物.所谓趣味是指可以比较轻松地了解一些原来不清楚的概念,增进知识,类似于打RPG游戏的升级 ...

  4. 精华 对express中next函数的一些理解

        关于next主要从三点来进行说明: next的作用是什么? 我们应该在何时使用next? next的内部实现机制是什么? Next的作用 我们在定义express中间件函数的时候都会将第三个参 ...

  5. struts自定义拦截器配置

    配置自己的拦截器可以先参照下系统的拦截器是怎么配置的,首先打开struts-default.xml搜索下interceptor:系统里的拦截器有很多,拦截器都是放在堆栈里的,系统引用的是默认堆栈, & ...

  6. Css背景渐变

    语法: background:linear-gradient( 渐变方向,起点颜色,终点颜色 ) 参数说明: 渐变方向:可以使用top,left,或者指定具体的角度(deg为单位),比如top是自上而 ...

  7. Coins

    Description Whuacmers use coins.They have coins of value A1,A2,A3...An Silverland dollar. One day Hi ...

  8. Android studio 运行设置

    在下载完SDK和Android studio后,修改android studio安装目录下bin/idea.properties文件,在末尾添加:idea.fatal.error.notificati ...

  9. Android -- 常见控件的小效果

    1,EditText控件 ① 修改光标颜色 自定义drawable 创建cursor.xml文件 <?xml version="1.0" encoding="utf ...

  10. (四)SQL入门 数据库的操作与事务管理

    数据库的操作,有三个最基本的语句,insert插入,update修改,delete删除. 不同的数据库厂商的实现可能不同,所以就不说具体的语法怎么写的了.说语法也没有意义,到处都可以复制粘贴,记得听某 ...