JQuery 实现在同一页面锚点链接之间的平滑滚动

web开发前端一直用JQuery ，真正接触了才体会到，JQuery 原来比我想象的要强大的多，也可能比我体会到的还要强大的多，特别是兼容性那个好，于是把一些好玩的，酷炫的，可以代替 JS 的，统统给用上了。

从 JQuery 引入今天的正题，用 JQuery 实现锚点链接之间的平滑滚动。以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效，效果相当不错，可以在同一页面的锚点链接之间实现平滑的滚动，但是 JS 代码相对来说比较冗长，现在好了，只要已经加载了 JQuery，我们就可以用较为简短的代码实现相同的效果。

使用方法如下：

1、载入 JQuery 库；

2、关键代码：

$(document).ready(function() {
$('a[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;
$('html,body').animate({
scrollTop: targetOffset
},
1000);
return false;
}
}
});
});

还是再要强调一下加载的顺序，先引用JQuery 类库。顺便说一下，经测试，该滚动效果在各浏览器下都兼容适用，唯有在 Opera 下表现有点怪异，还有待改进。

赞 (0)

相关推荐

  • jQuery实现平滑滚动到指定锚点的方法

    本文实例讲述了jQuery实现平滑滚动到指定锚点的方法.分享给大家供大家参考.具体如下: 定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能 // HTML: // <h1 id="anchor">Lorem Ipsum</h1> // <p><a href="#anchor" class="topLink">Back t

  • jQuery实现页面内锚点平滑跳转特效的方法总结

    平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",就像#keleyi,今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery实

  • jQuery实现平滑滚动页面到指定锚点链接的方法

    本文实例讲述了jQuery实现平滑滚动页面到指定锚点链接的方法.分享给大家供大家参考.具体如下: $.fn.scroller = function() { var speed = 'slow'; // Choose default speed $(this).each(function() { $(this).bind('click', function() { var target = $(this).attr('href'); // Get scroll target $(target).S

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

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用JQuery简单的实现这个效果: 比如,这里我们将通过点击<a>标签跳转到 id为content的指定位置那里. <a id="turnToContent" href="#content"></a> 然后呢,就在我们想要的位置设置id为content的内容块,这里用一个div模拟一篇不像文章的文章.最好将此d

  • jQuery实现锚点向下平滑滚动特效示例

    jQuery实现锚点向下平滑滚动特效示例

    实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ window.location.hash = hash; }); 简单实例代码: <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.

  • jquery如何实现锚点链接之间的平滑滚动

    复制代码 代码如下: $('a[href*=#]').click(function() { if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) { var $target = $(this.hash); $target = $target.length && $target || $('[name

  • JQuery 实现在同一页面锚点链接之间的平滑滚动

    web开发前端一直用JQuery ,真正接触了才体会到,JQuery 原来比我想象的要强大的多,也可能比我体会到的还要强大的多,特别是兼容性那个好,于是把一些好玩的,酷炫的,可以代替 JS 的,统统给用上了. 从 JQuery 引入今天的正题,用 JQuery 实现锚点链接之间的平滑滚动.以前介绍过一个用 JS 实现的页面锚点跳转缓冲特效,效果相当不错,可以在同一页面的锚点链接之间实现平滑的滚动,但是 JS 代码相对来说比较冗长,现在好了,只要已经加载了 JQuery,我们就可以用较为简短的代码

  • JS中锚点链接点击平滑滚动并自由调整到顶部位置

    JS中锚点链接点击平滑滚动并自由调整到顶部位置

    锚点链接点击平滑滚动并自由调整到顶部的位置 一.添加锚点 注意a标签用的nacTo 而不是href: <ul> <li><a class="anchor" navTo="one">目标选择</a></li> <li><a class="anchor" navTo="two">目标客户</a></li> <li>

  • jQuery 锚点跳转滚动条平滑滚动一句话代码

    jQuery锚点跳转滚动条平滑滚动一句话代码 复制代码 代码如下: $("html,body").animate({scrollTop: $("#box").offset().top}, 1000); 一下是一些jquery的小技巧1. 控制编译结果 复制代码 代码如下: <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></sc

  • vue 导航锚点_点击平滑滚动,导航栏对应变化详解

    最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应 代码如下: 1.html结构(因为从项目里截取代码,allMenuList数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr">

  • jquery实现网页的页面平滑滚动效果代码

    jquery实现网页的页面平滑滚动效果代码

    本文实例讲述了jquery实现网页的页面平滑滚动效果代码.分享给大家供大家参考,具体如下: 这款网页页面平滑滚动jquery代码,点击链接会让网页平滑滚动到链接对应的位置. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-link-scroll-page-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • jQuery使用之处理页面元素用法实例

    本文实例讲述了jQuery使用之处理页面元素用法.分享给大家供大家参考.具体分析如下: 对于页面的元素,在DOM编程中可以通过各种查询.修改手段进行管理,非常麻烦.jQuery提供了一整套的方法来处理页面的元素.包括元素的内容.复制.移动和替换等.这里将介绍一些常用的内容. 1.直接获取.编辑内容. 在jQuery中,主要是通过html()和text()两个方法来获取和编辑页面的内容.其中html()相当于获取节点的innerHTML属性,添加参数html(text),则为设置innerHtml

随机推荐