标签分类
技术文章
当前位置:主页 > 计算机编程 > jQuery > jQuery实现锚点scoll效果实例分析

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

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

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

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

Bootstrap与jQuery UI框架设计
  • 类型:jQuery大小:180 MB格式:PDF出版:中国水利水电出版社作者:肖睿//吴振宇
立即下载

更多相关的学习资源可以参阅 程序设计电子书Web前端视频、等栏目。

本文实例讲述了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程序设计有所帮助。

以上就是本次给大家分享的全部知识点内容总结,大家还可以在下方相关文章里找到vue项目中使用md5加密以及、 解决axios.interceptors.respon、 儿童python编程入门书籍推、 等jQuery文章进一步学习,感谢大家的阅读和支持。

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

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

展开 +

收起 -

学习笔记
网友NO.294155

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 });});/script stylebody, html, .main { height: 100%;} section { min-height: 100%;}/style/headbodya href="#section2" rel="external nofollow" 点击此处平滑滚动到第二部分/adiv class="main" section/section/divdiv class="main" id="section2" section SECTION 2 /section/div/body/html 以上这篇jQuery实现锚点向下平滑滚动特效示例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持码农之家。 ……

网友NO.605590

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-2019 xz577.com 码农之家

版权责任说明