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. /date(-62135596800000)转换正常格式的时间

    function formatDatebox(value) { if (value == null || value == '') { return ''; } var dt = parseToDat ...

  2. thinkPHP CRUD操作

    数据访问 以 nation 表为例 方法一  => select() ①造模型对象 $naiton = D('Nation');   //也可以使用M()方法 ②查询所有 $a = $natio ...

  3. 解决织梦DEDEcms指定arclist的特定ID排序的方法

    转载网址:http://blog.hrseo.net/xuexi/184.html 替换/include/taglib/arclist.lib.php这个文件,下载链接: http://pan.bai ...

  4. JSON入门

    一.简介     1.描述         1)JavaScript 对象表示法(JavaScript Object Notation) 2)存储和交换文本信息的语法.类似 XML 3)比 XML 更 ...

  5. php 删除一段字符串的中的中文

    <?php header('Content-type:text/html;charset=utf-8'); function p($arr){ echo "<pre>&qu ...

  6. Ubuntu vi 常用命令集合

    :w 保存文件但不退出vi:w file 将修改另外保存到file中,不退出vi:w! 强制保存,不推出vi:wq 保存文件并退出vi:wq! 强制保存文件,并退出viq: 不保存文件,退出vi:q! ...

  7. (转)COM组件里的AddRef()

    D3D是 COM组件,它在服务进程中运行,而不在当前的客户进程中.在DX组件运行过程中,要创建一系列接口对象,如CreateDevice()返回接口指针,这些接口及其占用内存什么时候释放,要通过“引用 ...

  8. PHP MVC

    学习一个框架之前,基本上我们都需要知道什么是mvc,即model-view-control,说白了就是数据控制以及页面的分离实现,mvc就 是这样应运而生的,mvc分为了三个层次,而且三个层次各司其职 ...

  9. linux 公社的网友出品的 Qt5.5 安装脚本,copy过来了

    http://www.linuxdiyf.com/linux/13046.html Qt5.5已经发布了,前两天PyQt也很快推出了一个5.5的对应版本.试验了一下(花了个周末啊!),真是越来越好用了 ...

  10. SSH(Struts,Spring,Hibernate)和SSM(SpringMVC,Spring,MyBatis)之间区别

    http://m.blog.csdn.net/article/details?id=52795914#0-qzone-1-52202-d020d2d2a4e8d1a374a433f596ad1440