jquery 监听所有锚点链接实现平滑移动
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 监听所有锚点链接实现平滑移动的更多相关文章
- jQuery监听事件经典例子
关键字:jQuery监听事件经典例子 js代码: ============================================================ $(function( ...
- jquery监听回车
jquery监听回车 <pre> $("#loginusername, #loginpassword, #code").keydown(function() { if( ...
- jquery 监听常用监听方法
最近在做网站开发,需要用到不少js的知识.之前学过现在重新来看,发现还真忘了不少~~ 在使用基于bootstrap,或者基于 jquery 的插件时,如过没有出现预期效果 请最先检查下是否优先载入的 ...
- jquery实现拖拽以及jquery监听事件的写法
很久之前写了一个jquery3D楼盘在线选择,这么一个插件,插件很简单,因为后期项目中没有实际用到,因此,有些地方不是很完善,后面也懒得再进行修改维护了.最近放到github上面,但是也少有人问津及s ...
- JQuery简单实现锚点链接的平滑滚动
在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现. 一般使用锚点来跳转到页面指定位置的时候,会生 ...
- 使用jQuery监听扫码枪输入并禁止手动输入的实现方法
@(知识点总结)[jquery|扫码抢] 基于jQuery的扫码枪监听.如果只是想实现监听获取条码扫码信息,可以直接拿来使用,如果有更多的条码判断处理逻辑需要自己扩展. 一.功能需求 使用扫码枪扫描条 ...
- jquery监听video标签视频播放暂停状态
由于jquery中没有video的paly,pause方法,所以在使用jquery来控制视频的播放的播放状态时会出现问题 之前的代码: let $video = $('#video'); $('.pl ...
- jquery监听input元素输入
一般我们监听input内容的变化都是通过onchange()事件来绑定,但这个做法有一个缺陷就是只有当正在被输入的input元素失去焦点时(即鼠标点击了别处)才会触发,而实际上我们往往希望能够满足在用 ...
- Jquery 监听浏览器前进后退
jQuery(document).ready(function () { if (window.history && window.history.pushState) { $(win ...
随机推荐
- Scrollview嵌套Listview运行后最先显示出来的位置不在顶部而是中间问题
问题: Scrollview里面嵌套了一个Listview ,通过设置一个方法设置了Listview的高度,现在的情况就是进到这个界面的时候看到的不是最上面 而是中间 解决办法: 设置ListView ...
- Hibernate 开发流程
Hibernate内部分装的技术:JDBC(Java Data Base Connectivity), JTA(Java Transaction API) , JNDI(Java Naming and ...
- Android之ListView&ViewPager模拟新闻界面
模拟新闻 APP 的界面 1)写 ListView 之前先写布局: 这里有两种 Item 的布局: <?xml version="1.0" encoding="ut ...
- ios 多种传值方式
在网上看了看传值方法,没有找到完整的.在这把自己看到的几种传值方法写写吧. 1 . 属性传值 2 . 通知传值 3 . 代理传值 4 . block传值 5 . 单列传值 6 . ShareAppli ...
- 初学JAVA的 感想 尹鑫磊
开始学习任何一门课(包括java),兴趣最重要.一直觉得自己在学计算机编程语言,学习了很多,但每门语言都停留在知识边缘地带,都没深入到它们的精华部分,对它们的精华部分知之甚少,于是趁学校开设这门课,并 ...
- Java中抽象类和接口
抽象类: 为什么要用抽象类? 1.父类的方法好多情况下是没有内容的.例如:USB是一个父类,里面的方法的函数体是可以不写,通过子类可以重写. 2.万一子类没有重写正确,是没有没有提示的.例如:父类中函 ...
- Linux防火墙简介及iptables的基本使用
一.防火墙基础知识 iptables/netfilter:网络防火墙,连接追踪(状态检测) netfilter:工作内核中,让规则能够生效的网络框架(framework) iptables:防火墙规则 ...
- C# DataGridView自定义分页控件
好些日子不仔细写C#代码了,现在主要是Java项目,C#.Net相关项目不多了,有点手生了,以下代码不足之处望各位提出建议和批评. 近日闲来无事想研究一下自定义控件,虽然之前也看过,那也仅限于皮毛,粗 ...
- 关于vue.js中class与style绑定的学习
练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- java中的反射,知道类名创建类,还可以设置私有属性的值
刚刚学到了反射,感觉反射的功能好强大,所以想写篇博客记录下自己的学习成果. 利用反射来创建对象. Class c1=Class.forName("test.Person");//通 ...