24. 解决链接锚点的生硬问题

 $('.nav .btn[href*=#],.icon2,.icon3').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[id=' + this.hash.slice(1) + ']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
})

JQuery 实现锚点链接之间的平滑滚动的更多相关文章

  1. jquery 监听所有锚点链接实现平滑移动

    jquery 监听所有锚点链接实现平滑移动,地址栏上不会改变链接地址 //监听所有锚点链接实现平滑移动 $('a[href*=#],area[href*=#]').click(function() { ...

  2. JQuery简单实现锚点链接的平滑滚动

    在平时的项目中,我们经常需要一些特效链接,如果使效果进一步加强,我们可以使点击锚点链接平滑滚动到锚点,下面就来给大家讲解下如何使用jQuery来实现.   一般使用锚点来跳转到页面指定位置的时候,会生 ...

  3. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  4. jQuery下锚点的平滑跳转

    对于锚点的平滑跳转,我觉得要谨慎使用,在个人站点或是这个效果含有功能提示可以用一用,在一般的商业性质的网站上,权衡来讲,不用更好,当然,这只是我的个人意见.jQuery库已经为我们做了很多的工作了,所 ...

  5. 使用jquery animate实现锚点慢慢平滑滚动效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. jQuery之锚点带动画跳转特效

    背景图片为金木研,这是我最爱的一张图. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...

  7. div锚点链接跳转

    a标签href可跳转到知道dom节点(通过id) 代码 <!DOCTYPE html> <html> <head> <meta name="view ...

  8. html邮件链接和锚点链接

    锚点链接: 锚点链接: 标记:<a name="XXX"></a> 取读:<a href="#XXX"></a> ...

  9. vue2.0模拟锚点实现定位平滑滚动

    vue2.0模拟锚点实现定位平滑滚动 效果为点击哪一个标题,平滑滚动到具体的详情. 如果是传统项目,这个效果就非常简单.但是放到 Vue 中,就有两大难题: 1. 在没有 jQuery 的 anima ...

随机推荐

  1. thinkphp一对多HAS_MANY

    关联关系通常我们所说的关联关系包括下面三种:一对一关联 :ONE_TO_ONE,包括HAS_ONE 和 BELONGS_TO 一对多关联 :ONE_TO_MANY,包括HAS_MANY 和 BELON ...

  2. h5 hdf5 文件转 tif 流程

    由于需要对h5(hdf5)格式的dem数据进行拼接,但是arcgis不能识别h5的地理参考信息,所以先将h5文件转为带地理参考的tif文件,然后再进行拼接. 工具:arcgis+envi 1.用arc ...

  3. Asp.Net Core--基于声明的授权

    翻译如下: 当创建身份时,其可以被分配由可信方发布的一个或多个声明. 索赔是名称值对,表示主题是什么,而不是主体可以做什么. 例如,您可能有驾驶执照,由当地驾驶执照颁发. 您的驾驶执照上有您的出生日期 ...

  4. PYTHON 写函数,计算传入字符串中【数字、字母、空格、以及其他的个数】

    def func1(s): al_num = 0 spance_num = 0 digit_num = 0 others_num = 0 for i in s: if i.isdigit(): # i ...

  5. c语言中的一些注意点

    1.头文件两种形式的区别(#include<mystring.h>与#include"mystring.h") 当运行一个程序时,需要调用自己写的函数时,需要在头文件加 ...

  6. WebService -- Java 实现之 CXF ( 使用CXF工具生成client 程序)

    1. 下载CXF 工具解压到磁盘 2.添加工具bin目录到PATH环境变量 3.创建一个CXF client新项目 4. run -> cmd 到指定目录,并运行工具目录下的批处理 “wadl2 ...

  7. InnoDB全文索引:N-gram Parser【转】

    本文来自:http://mysqlserverteam.com/innodb%E5%85%A8%E6%96%87%E7%B4%A2%E5%BC%95%EF%BC%9An-gram-parser/ In ...

  8. Spring的jdbcTemplate查询执行原生sql

    在spring与hibernate整合时进行数据库检索,执行原生sql: public AppointmentEvaluateVo searchMyfeedbackDetail(String acco ...

  9. ABAP 读取销售订单抬头文本自建函数

    FORM frm_read_txt USING vbeln LIKE vbak-vbeln                   CHANGING txt . DATA :lc_name         ...

  10. (转)nginx优化 实现10万并发访问量

    转自http://www.cnblogs.com/pricks/p/3837149.html 一般来说nginx配置文件中对优化比较有作用的为以下几项:worker_processes 8;1 ngi ...