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. php生成唯一订单号

    支持更改长度/** * 生成唯一订单号 * */ function build_order_no(){ return date('Ymd').substr(implode(NULL, array_ma ...

  2. 轮播效果(margin-left/top)移动

    HTML代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  3. jquery时间控件datepicker

    配置文件 $("#joinedTime").datepicker({ inline: true, yearRange: "1996:2016", showBut ...

  4. HTML 标签 表格

    <html>    --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> <body& ...

  5. PHP mysql_fetch_array() 函数

    PHP mysql_fetch_array() 函数 从结果集中取得一行作为关联数组,或数字数组,或二者兼有.返回根据结果集取得的行生成的数组,如果没有更多行则返回false. 提示:有很重要的一点必 ...

  6. iOS的主要框架介绍

    框架是一个目录,这个目录包含了共享库,访问共享库里代码的头文件,和其它的图片和声音的资源文件.一个共享库定义的方法或函数可以被应用程序调用. IOS提供了很多你可以在应用程序里调用的框架.要使用一个框 ...

  7. android aidl 进程间通信需要注意的地方(android.os.TransactionTooLargeException)

    转自:http://blog.sina.com.cn/s/blog_4e1e357d0102wau9.html 1.bus工程实现通过service实现aidl实体类 2.actor工程通过发起bin ...

  8. 因为换工作,需要学习CCNA的课程

    听说集齐7个CCIE就可以召唤神龙,不知道是不是真的,从CCNA开始吧! 加油!!!

  9. [NOIP2013] 火柴排队(归并排序)

    题目描述 涵涵有两盒火柴,每盒装有 n 根火柴,每根火柴都有一个高度. 现在将每盒中的火柴各自排成一列, 同一列火柴的高度互不相同, 两列火柴之间的距离定义为: ∑(ai-bi)^2 其中 ai 表示 ...

  10. InfoPi运行机制介绍

    整体工作框架 文件目录结构 数据库设计 程序开发框架 注:图片可能被自动缩小,可以另存看大图 1.整体工作框架. 通用户关注绿色竖线左侧的内容即可 2.InfoPi的文件目录结构. 请留意一下cfg目 ...