点击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. mysql slave to master

    1, 在maste A上面创建专门用于备份的用户Bshow master statusget log_file and log_pos 2,CHANGE MASTER TO MASTER_HOST=' ...

  2. swift 判断字符串长度

    projectName.lengthOfBytes(using: String.Encoding(rawValue: String.Encoding.utf16.rawValue)) > 0

  3. PostgreSQL 锁监控

    PG>9.2 postgres=# SELECT blocked_locks.pid AS blocked_pid,postgres-# blocked_activity.usename AS ...

  4. Leetcode: Design Snake Game

    Design a Snake game that is played on a device with screen size = width x height. Play the game onli ...

  5. web前端基础知识 jQuery

    通过之前的学习我们已经了解了html.css.javascript的相关知识:本次我们就共同学习进阶知识:jQuery~ 一.什么是jQuery? jQuery其实就是一个轻量级的javascript ...

  6. LeetCode: Ransom Note

    public class Solution { public boolean canConstruct(String ransomNote, String magazine) { int[] rans ...

  7. android stduio 引入 .so

  8. 一个简单的c# 贪吃蛇程序

    一个简单的c#贪吃蛇程序 程序分为界面设计和程序设计:界面设计和程序设计均参考了一些游戏实例,但是所有代码内容是本人编写. 由于看到别人写的程序并没有署名,这里的署名全部都是csdn官网. 游戏界面设 ...

  9. sync

    tools-android-Sync Project ---------------- file-Project Structure add dependencies

  10. OA工作流规格--转

    工作流是整个OA系统的核心,也是BPM的核心,工作流到 底需要实现哪些功能,本文就此以用户的需求为蓝本进行阐述.工作流表面看起来是很简单的,无非是一个表单模板,一个流程定义,然后起草后根据设定的流程一 ...