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. Photoshop的评价

    Photoshop是Adobe公司旗下最为出名的图像处理软件之一. Photoshop的功能性:主要处理以像素所构成的数字图象.使用其众多的编修与绘图工具,可以有效地进行图片编辑工作.支持Window ...

  2. session在.ashx文件操作问题

    在.ashx一般处理文件中如果session没有继承System.Web.SessionState.IRequiresSessionState那么session只有读的权限,没有写的权限; sessi ...

  3. 如何设置mysql的表不区分你大小写

    Linux上安装MySQL默认是数据库的表大小写敏感的.修改很简单,只要该一个mysql的配置文件就可以了. mysql> show tables;+---------------------- ...

  4. arcgis制作兴趣点分布图

    数据准备: 1.矢量:芜湖市区行政区.shp  企业分布点.shp 2.影像:Landsat 8 软件:arcgis 10.3  Envi4.8 目的:制作一幅以市区行政区为底图的企业分布点的图,同时 ...

  5. Java8新特性--lamada详解

    最近玩了一下这个,感觉挺有趣的,语法使用起来很简洁,让代码看起来挺清爽易读的. 看了一下源码,发现挺充分的利用了jak1.5的特性(注解.泛型). 但是,具体的实现流程还是有点不通透,先Mark,等用 ...

  6. Java篇-File类之常用操作

    /** * */ package com.io.file; import java.io.File; import java.io.IOException; /** * <pre> * & ...

  7. fine-grained

    鸟类图像分类,CUB-200-2011,可以适用于图片左右的调整.

  8. C语言数据结构之 简单选择排序

    算法:设所排序序列的记录个数为n.i取1,2,-,n-1,从所有n-i+1个记录(Ri,Ri+1,-,Rn)中找出排序码最小的记录,与第i个记录交换.执行n-1趟 后就完成了记录序列的排序. 编译器: ...

  9. C#的选择语句练习

    1.请输入一个数x,若x<1,则y=x:若1<=x<10,则y=2x-1:若x>=10,则y=3x-11,要求随意输入一个x值,求出y值. 2.输入问题[你有房子吗?],若回答 ...

  10. Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块

    传统的 angular 应用不支持异步加载模块,必须在 module 启动的时候,所有模块必须预加载进来. 通过使用 angular-async-loader 库,我们可以使用 requirejs 等 ...