当前位置: 首页 > 面试题库 >

jQuery平滑滚动到锚点?

沙宣
2023-03-14
问题内容

有没有一种方法可以使用jQuery向下滚动到锚链接?

喜欢:

$(document).ready(function(){
  $("#gotomyanchor").click(function(){
      $.scrollSmoothTo($("#myanchor"));
  });
});


问题答案:

这是我的方法:

    var hashTagActive = "";
    $(".scroll").on("click touchstart" , function (event) {
        if(hashTagActive != this.hash) { //this will prevent if the user click several times the same link to freeze the scroll.
            event.preventDefault();
            //calculate destination place
            var dest = 0;
            if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
                dest = $(document).height() - $(window).height();
            } else {
                dest = $(this.hash).offset().top;
            }
            //go to destination
            $('html,body').animate({
                scrollTop: dest
            }, 2000, 'swing');
            hashTagActive = this.hash;
        }
    });

然后,您只需要像这样创建锚:

<a class="scroll" href="#destination1">Destination 1</a>


 类似资料:
  • 问题内容: 我一直在尝试滚动到div id jquery代码以正常工作。基于另一个堆栈溢出问题,我尝试了以下操作 但这没有用。它只是捕捉到div。我也试过 没有进展。 问题答案: 您需要设置动画

  • 问题内容: 我的页面上有几个超链接。用户访问我的帮助部分时将阅读的常见问题解答。 使用锚点链接,我可以使页面滚动到锚点并在那里引导用户。 有没有办法使滚动平滑? 但是请注意,他正在使用自定义JavaScript库。也许jQuery提供了类似的功能? 问题答案: 现在有一种本地方法可以做到这一点: 当前仅最先进的浏览器才支持此功能。 对于较旧的浏览器支持,可以使用以下jQuery技术: 如果您的目标

  • 我需要一些帮助如何保持保持当前锚链接活动后刷新页面。实际上,我有这个垂直的navbar菜单(http://prntscr.com/fz9yct),默认情况下,我将类active添加到中,所以当我们打开页面时,navbar看起来就像您在屏幕截图中看到的那样。 当我滚动,或单击任何其他navbar列表项,一切工作良好,平滑滚动到适当的部分,并删除类活动从上一个锚链接,并添加到适当的。 问题是当我刷新p

  • 本文向大家介绍jquery平滑滚动到顶部插件使用详解,包括了jquery平滑滚动到顶部插件使用详解的使用技巧和注意事项,需要的朋友参考一下 点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图: 关键代码: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 问题内容: 我正在编写一个页面,其中我只想将原始JavaScript代码用于UI,而不会受到插件或框架的干扰。 现在,我正在努力寻找一种无需使用jQuery即可平滑滚动页面的方法。 问题答案: 尝试使用此平滑滚动演示或类似的算法: 使用获取当前的最佳位置 获取元素的位置,直到要滚动到的位置: 进行for循环到达该位置,这将非常快,或者使用计时器进行平滑滚动,直到使用 安德鲁·约翰逊的原始代码:

  • 本文向大家介绍jquery实现图片平滑滚动详解,包括了jquery实现图片平滑滚动详解的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jquery图片平滑滚动效果的具体代码,供大家参考,具体内容如下 随便写了个DOM,没有美观性,见谅 原理: 1、定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2、为什么要用两个ul?因为要用到jQuery的克隆方法clone()。把第一个