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).ScrollTo(speed);
      return false;
    });
  });
}

希望本文所述对大家的jquery程序设计有所帮助。

赞 (0)

相关推荐

  • 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简单实现锚点链接的平滑滚动

    一般使用锚点来跳转到页面指定位置的时候,会生硬地立即跳转到指定位置,但是有些时候我们想要平滑地过渡到指定的位置,那么可以使用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 实现在同一页面锚点链接之间的平滑滚动

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

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

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

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

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

  • 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

  • Vue引入jquery实现平滑滚动到指定位置

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问题的,之前参考了一位博主的想法:通过在一定时间内定时分步长滚动,连续起来后肉眼观察就是平滑滚动的效果(点击查看),当时看到这篇文章我是心花怒放,赶紧参考代码写进去,然并卵...根本没有效果,后来联系博主讨论后得出结论可能是我的vue2.4版本对计时器不友好,建议我降版本,这样的话...我还是继续研究

  • jQuery实现平滑滚动的标签分栏切换效果

    jQuery实现平滑滚动的标签分栏切换效果

    本文实例讲述了jQuery实现平滑滚动的标签分栏切换效果.分享给大家供大家参考.具体如下: 这是一款老外的作品,后半部分的代码有点乱,具体就不细整理了,喜欢的朋友自己拷贝代码慢慢整理一下吧,呵呵,虽乱但功能不乱,预览看效果吧,很不错的标签滚动切换. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-scroll-bq-menu-cha-style-codes/ 具体代码如下: <!DOCTYPE html> <head&g

  • 使用jQuery加载html页面到指定的div实现方法

    一.jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里. 比如:加载a.html里面的<div id="row"></div>这个div里面的所有内容加载到b.html的这个div里<div id="content"></div> 用jquery ajax 可以实现 假设 a.html 和b.html在同一目录 b.html <script >

  • python中的selenium实现自动向下滚动页面并指定最大滑动距离

    需要selenium控制的chrome向下滑动,自动加载一些内容,核心代码是: browser.execute_script("window.scrollBy(0,300)") 这行可以向下滑动300个像素 需要的工具函数如下: def roll_window_to_bottom(browser, stop_length=None, step_length=500):     """selenium 滚动当前页面,向下滑     :param browse

  • Vue滚动页面到指定位置的实现及避坑

    目录 Vue滚动页面到指定位置 方法1 方法2 方法3 避坑指南 滚动页面到一定距离后固定 Vue滚动页面到指定位置 在Vue中,有三种方式可以实现H5页面滑动至指定位置 方法1 //先获取目标位置距离 mounted() {   this.$nextTick(() => {      setTimeout(() => {         let targetbox= document.getElementById('targetbox');         this.target= targ

  • jQuery实现鼠标经过时出现隐藏层文字链接的方法

    jQuery实现鼠标经过时出现隐藏层文字链接的方法

    本文实例讲述了jQuery实现鼠标经过时出现隐藏层文字链接的方法.分享给大家供大家参考.具体如下: 这里演示Jquery显示隐藏层的方法,鼠标经过时出现文字链接,模拟评分效果,这里没有加动作,仅显示了前台效果的实现. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-show-txt-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tra

  • jQuery创建平滑的页面滚动(顶部或底部)

    在这篇文章中,我将通过本教程向您展示了如何创建一个平滑的滚动效果,使用jQuery.让您可以滚动到你的网页的顶部或底部 它是如何工作的 首先,加载jquery库在</ head>标签结束前: 复制代码 代码如下: <script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery1.3.2.js"></script>jQuery滚动到底部: 链接

  • 基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件实现锚点链接平滑滚动的方法

    基于vue监听滚动事件,实现锚点链接平滑滚动 近日在做一个vue项目的餐饮模块,小编需要实现一个菜单列表显示的功能(如图所示:左边为菜单类别,右边显示相对应的菜品) 小编将此分为三个功能模块来实现(本来一张动画就清晰明了,小编太笨,只得口述一下): 1.左边点击类别,右边显示相应类别的菜品列表(平滑滚动) 2.滚动右边的滚动条,左边对应的显示当前样式 3.若从别的页面点击菜品进来该页面,则该菜品为指定效果 小编也是vue的初学者,在阅读了大量的文章后,其中借鉴http://www.jb51.ne

随机推荐