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. Python学习感悟

    学习任何新知识,我自己偏向于在实践中学习,这样效率更高:如果只是学习基本概念,会很枯燥. 现在的问题是:不是所有的新知识都可以在实践中学习!

  2. SAPCAR 压缩解压软件的使用方法

    SAPCAR 是 SAP 公司使用的压缩解压软件,从 SAP 网站下载的补丁包和小型软件基本都是扩展名为 car 或 sar 的,它们都可以用 SAPCAR 来解压.下面是它的使用说明: 用法: 创建 ...

  3. 转载:Android横屏竖屏切换的问题

    一.禁止横竖屏转换 Android横竖屏切换在手机开发中比较常见,很多软件在开发过程中为了避免横竖屏切换时引发不必要的麻烦,通常禁止掉横竖屏的切换, 通过在AndroidManifest.xml中设置 ...

  4. Html中代码换行造成空格间距的问题

    Html中代码换行造成空格间距的问题解析 解决方法: 一.简单粗爆不换行 写代码的时候不要换行,input等在一行输写,那么将解决该问题.但是代码就变得不再那么容易好看. 二.设置父级块的字体大小为0 ...

  5. 系统中异常公共处理模块 in spring boot

    最近在用spring boot 做微服务,所以对于异常信息的 [友好展示]有要求,我设计了两点: 一. 在业务逻辑代码中,异常的抛出 我做了限定,一般只会是三种: 1. OmcException // ...

  6. while做法1.兔子生兔子 2.求100以内质数的和3.洗发水15元 牙膏5元 香皂2元 150元的算法

    1.兔子生兔子 2.求100以内质数的和 3.150块钱花完问题

  7. 第七章:LED将为我闪烁:控制发光二极管

        在之前章节了解到Linux驱动程序可以控制软硬件,可以实现软硬件之间的交互.在这章我们学习LED驱动的实现原理.Linux内核提供了多个与I/O内存交互的函数可以实现控制硬件.    编写LE ...

  8. [转]delete 多表删除的使用

    1.从数据表t1中把那些id值在数据表t2里有匹配的记录全删除掉 DELETE t1 FROM t1,t2 WHERE t1.id=t2.id 或 DELETE  FROM t1 USING t1,t ...

  9. VS 2005 修复重置(深度重置)

    /resetuserdata 参数 如果 Visual Studio 在运行时被损坏,且无法从损坏状态进行恢复,您可以使用此参数将 Visual Studio 重置到其使用之初的状态.这些问题的例子可 ...

  10. qsort C++ VS2013 leetcode

    class Solution { private: static int compare(const void * a, const void * b) { return (*(int*)a - *( ...