点击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. Dll的生成,转化为OMF格式的DLL

    extern "C" { __declspec(dllexport) int psq_add(int a, int b); } C:\Users\pansq>mkexp my ...

  2. C# (灰度)加权平均法将图片转换为灰度图

    private Bitmap ToG(string file) { using (Bitmap o = new Bitmap(file)) { Bitmap g = new Bitmap(o.Widt ...

  3. [原创]java WEB学习笔记107:Spring学习---AOP切面的优先级,重用切点表达式

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. ASPX.Net控件

    简单控件 Label :显示文字,编译后的元素的为span 主要设置属性边框包括边框颜色,边框样式,边框粗细 Liteal :显示文字,编译后不会产生任何元素,一般用来从后台输出JS代码 Textbo ...

  5. j2ee部分

    j2ee部分 1.BS与CS的联系与区别. C/S是Client/Server的缩写.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.InFORMix或 ...

  6. AppCan JSSDK模块扩展

    1.      从源码开始: 我们先看源码的8188行到9525行: window.appcan && appcan.define('window',function($,export ...

  7. 雾里看花般的迷茫--货运APP

    移动互联网正在改变我们的生活方式,各种手机APP充斥着人们的生活,物流行业也不例外.货运APP的出现,对于物流行业是一个提升的机会,也是迈向标准化和专业化的一个有效途径. 经过三十多年的发展,我国物流 ...

  8. 七牛整合PHP上传文件

    七牛支持抓取远程图片 API,用 access_key + secret_key + url 生成 access_token, 把 access_token 加在 header 里,然后向 post ...

  9. Infinite loop when using cookieless session ID on Azure

    If you use cookieless session ID and deploy them on Azure, you might get infinite loop when you quer ...

  10. maven的使用--初级篇

    一.前言         早就知道maven 在java 项目的管理方面名声显赫,于是就想着学习掌握之,于是查阅了大量文档.发现这些文档的作者都是java 的大腕,大多都是站在掌握了一定maven 基 ...