点击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. Computop支付网关(一) credit Card

    1.界面没有中文,只能选择英文 sp – Spanish; en – English; ca – Catalan; fr – French; de – German; du – Dutch; it – ...

  2. rhel 7.0 配置centos yum源(2016/12/8),成功!

    1.首先查看redhat 7.0系统本身所安装的那些yum 软件包: rpm -qa | grep yum #列出所有已安装的yum包 2.删除这些包: rpm -e *.rpm --nodeps # ...

  3. hduoj 1285 确定比赛名次

    http://acm.hdu.edu.cn/showproblem.php?pid=1285 确定比赛名次 Time Limit: 2000/1000 MS (Java/Others) Memory ...

  4. 用c的数组简单的模拟了入栈

    其实很简单,只要控制住输出时倒输出.且只输出一个 #include <stdio.h>#include <stdlib.h>int zhan[20];int n=-1;void ...

  5. WebForm 内置对象

    内置对象: Response对象:响应请求 Response.Write("<script>alert('添加成功!')</script>"); Respo ...

  6. phonegap android 输入法弹出会遮盖表单框的解决办法

    phonegap android 当页面内容比较多,表单超出屏幕范围时,点击输入,输入法会遮盖住表单框,而且无法向上滑动. 经过测试发现,是由于config.xml中设置了 FullScreen 的全 ...

  7. 五步教你实现使用Nginx+uWSGI+Django方法部署Django程序

    Django的部署可以有很多方式,采用nginx+uwsgi的方式是其中比较常见的一种方式. 在这种方式中,我们的通常做法是,将nginx作为服务器最前端,它将接收WEB的所有请求,统一管理请求.ng ...

  8. Win10 驱动装不上,提示:Windows 无法验证此设备所需的驱动程序的数字签名。该值受安全引导策略保护,无法进行修改或删除。

    Windows 无法验证此设备所需的驱动程序的数字签名.某软件或硬件最近有所更改,可能安装了签名错误或损毁的文件,或者安装的文件可能是来路不明的恶意软件.(代码52) 最近换了新主板,升级了Windo ...

  9. CentOS 7 配置静态 ip

    1. 需求场景: 在 CentOS7 上部署了一个 svn ,由于centOS7 默认是 dhcp 的,所以每过一段时间 ip 就会有变化,而 svn 要求 ip 是不能变的,不然没法同步. 网上找了 ...

  10. django之DB操作

    先来区分一下什么是一对一.多对多 一对一:子表从母表中选出一条数据一一对应,母表中选出来一条就少一条,子表不可以再选择母表中已被选择的那条数据: 一对多:子表从母表中选出一条数据一一对应,但母表的这条 ...