jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址

    //监听所有锚点链接实现平滑移动
$('a[href*=#],area[href*=#]').click(function() {
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;
//为提升用户体验,做出算法改进 start
var clientHeight = document.body.clientHeight; //浏览器可视高度
targetOffset = targetOffset-(clientHeight/2)+100;
//end
$('html,body').stop(true).animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});

jquery 监听所有锚点链接实现平滑移动的更多相关文章

  1. jQuery监听事件经典例子

    关键字:jQuery监听事件经典例子  js代码:  ============================================================  $(function( ...

  2. jquery监听回车

    jquery监听回车 <pre> $("#loginusername, #loginpassword, #code").keydown(function() { if( ...

  3. jquery 监听常用监听方法

    最近在做网站开发,需要用到不少js的知识.之前学过现在重新来看,发现还真忘了不少~~ 在使用基于bootstrap,或者基于 jquery 的插件时,如过没有出现预期效果 请最先检查下是否优先载入的 ...

  4. jquery实现拖拽以及jquery监听事件的写法

    很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...

  5. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  6. 使用jQuery监听扫码枪输入并禁止手动输入的实现方法

    @(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...

  7. jquery监听video标签视频播放暂停状态

    由于jquery中没有video的paly,pause方法,所以在使用jquery来控制视频的播放的播放状态时会出现问题 之前的代码: let $video = $('#video'); $('.pl ...

  8. jquery监听input元素输入

    一般我们监听input内容的变化都是通过onchange()事件来绑定,但这个做法有一个缺陷就是只有当正在被输入的input元素失去焦点时(即鼠标点击了别处)才会触发,而实际上我们往往希望能够满足在用 ...

  9. Jquery 监听浏览器前进后退

    jQuery(document).ready(function () { if (window.history && window.history.pushState) { $(win ...

随机推荐

  1. javascript选择器querySelector和querySelectorAll的使用和区别

    querySelector 和 querySelectorAll 方法是 W3C Selectors API规范中定义的.他们的作用是根据 CSS 选择器规范,便捷定位文档中指定元素. 目前几乎主流浏 ...

  2. (转)appendChild()、insertBefore()是移动element节点!

    原文地址 appendChild().insertBefore()是移动element节点,看书的时候注意过,也可以做一个简单的例子测试一下: <div id="div1"& ...

  3. 字符串反转C#的实现

    字符串反转是面试过程中出现频率较高的算法题,今天一个牛同事让我用C#帮他实现这个算法,前提当然是不能使用类库. 例如: how are you 的反转结果为 you are how. 算法1: 是我当 ...

  4. noConflict

    var _avalon = window.avalon avalon.noConflict = function(deep) { if (deep && window.avalon = ...

  5. 在sublime text 3中设置浏览器预览快捷键

    1.安装 SideBarEnhancements ctrl+shift+p,进入命令模式,然后输入package control(或者直接输 pci 或许也行),回车: 输入:SideBarEnhan ...

  6. WEP算法的安全性

    翻译自http://www.isaac.cs.berkeley.edu/isaac/wep-faq.html WEP算法的安全性 这篇文章讲述了我们对有线等效加密协议(WEP, 802.11标准的一部 ...

  7. 苹果Home键恢复(无工具篇)

    无工具法: 弹指神功.用手指轻轻弹Home,过了一阵子后可能会出现白色污垢,其后再重覆“弹”,直至正常为止.(亲测可用) 软件调试法.首先,打开任意一款应用程序,按住电源开关几秒钟,直到屏幕出现滑动关 ...

  8. const成员变量初始化总结

    const可以用来声明常量也就是说他的值不能被修改: const成员必须在定义的时候同时初始化,不能进行赋值 如 const int a:a的值不能修改,不能给它赋值,如何才能让它一开始就拥有一个值? ...

  9. Linux下压缩mp3文件

    apt-get install lame lame -b 64 a.mp3 b.mp3 lame是压缩mp3的一个小工具 参数 -b 64 是输出文件的采样率64 a.mp3 是源文件 b.mp3 是 ...

  10. 合并果子 2004年NOIP全国联赛普及组

    时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description 在一个果园里,多多已经将所有的果子打了下来,而且按果子的不同种类分成了不同的堆 ...