当前位置:首页 > jQuery技术文章 > jQuery实现锚点scoll效果实例分析

jQuery实现锚点scoll效果的具体方法

  • 发布时间:
  • 作者:码农之家原创
  • 点击:183

这篇文章主要知识点是关于jQuery、锚点、scoll、效果、jQuery实现平滑滚动到指定锚点的方法 的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下相关资源

Bootstrap与jQuery UI框架设计

随着各类移动终端设备的普及 之前针对PC端设计的网站已经无法满足用户的需求 响应式网页设计的概念应运而生。无论用户使用笔记本还是iPad 页面都应该能够自动切换分辨率、图片尺寸及相

查看详情

jQuery实现锚点scoll效果实例分析

本文实例讲述了jQuery实现锚点scoll效果的方法。分享给大家供大家参考。具体实现方法如下:

$('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;
       var obj = document.documentElement;
     if (jQuery.browser.safari)
           obj = document.body
    if (jQuery.browser.msie)
           obj = 'html';
      $(obj).animate({scrollTop: targetOffset}, 1000);
       return false;
     }
   }
});

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

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

本文实例讲述了jQuery实现平滑滚动到指定锚点的方法。分享给大家供大家参考。具体如下:

定义好指定的anchor锚点,调用下面的js代码可以让页面平滑的滚动到指定的位置,非常实用,比如返回页面顶部,去往页面底部等功能

// HTML:
// <h1 id="anchor">Lorem Ipsum</h1>
// <p><a href="#anchor" class="topLink">Back to Top</a></p>
$(document).ready(function() {
  $("a.topLink").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + "px"
    }, {
      duration: 500,
      easing: "swing"
    });
    return false;
  });
});

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

以上就是本次给大家分享的关于jQuery的全部知识点内容总结,大家还可以在下方相关文章里找到怎样处理jQuery EasyUI 已打开、 JQuery循环滚动文字图片实、 jquery幻灯片效果实例代码、 等jQuery文章进一步学习,感谢大家的阅读和支持。

上一篇:jQuery实现鼠标经过图片变亮离开变暗的效果代码

下一篇:jquery实现5种带缩略图的可定制高度画廊效果

展开 +

收起 -

学习笔记
网友NO.408029

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

实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $(hash).offset().top}, 800, function(){window.location.hash = hash;}); 简单实例代码: !DOCTYPE htmlhtmlheadscript src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"/scriptscript$(document).ready(function(){ // Add smooth scrolling to all links $("a").on('click', function(event) { // Make sure this.hash has a value before overriding default behavior if (this.hash !== "") { // Prevent default anchor click behavior event.preventDefault(); // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area $('html, body').animate({ scrollTop: $(hash).offset().top }, 800, function(){ // Add hash (#) to URL when done scrolling (default click behavior) window.location.hash = hash; }); } // End if });});/scri……

网友NO.554776

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程序设计有所帮助。 ……

<
1
>

电子书 编程教程 文档 软件 源码 视频

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

免责声明:网站所有作品均由会员网上搜集共同更新,仅供读者预览及学习交流使用,下载后请24小时内删除

版权投诉 / 书籍推广 / 赞助:QQ:520161757