在页面加载时平滑滚动到所需部分答案

【问题标题】：Smooth scroll to desired section on page load在页面加载时平滑滚动到所需部分
【发布时间】：2020-09-09 19:34:09
【问题描述】：

我创建了一个带有自定义分页功能的 WordPress 网站。该函数将#latest 添加到链接的末尾，以定位我的网站div，其中包含最新的帖子。例如，如果用户单击第3 页，它将加载该页面，然后将它们发送到div #latest。这很好用，但是我希望它能够平滑地滚动到 div。

我尝试添加这个 jQuery 并没有发生任何事情，它仍然只是突然进入该部分。

jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('load',function (e) {
        e.preventDefault();

        var target = this.hash;
        var $target = $(target);

        jQuery('html, body').stop().animate({
            'scrollTop': $target.offset().top
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
    });
});

有没有更好的方法来做到这一点？

【问题讨论】：

标签： javascript jquery html css wordpress

【解决方案1】：

我相信，当滚动动画生效时，有些资源没有被考虑在内，并且由于该功能通过顶部偏移工作 - 您必须确保在所有可能影响的资源之后使用它正在加载文档的高度或元素的偏移量。

将您的 ready 更改为 load。

.ready() vs. .load()

在大多数情况下，脚本可以在 DOM 层次结构完成后立即运行已完全建成。传递给 .ready() 的处理程序得到保证在 DOM 准备好后执行，所以这通常是最好的附加所有其他事件处理程序并运行其他 jQuery 代码的地方。

如果代码依赖于加载的资源（例如，如果图像的尺寸是必需的），代码应放在而是加载事件的处理程序。

这是我的功能：

$(function(){
    var target = "latest";
    $('html, body').animate({
        scrollTop: $('#'+target).offset().top
    }, 900,'swing');
    return false;
});

JSFiddle

【讨论】：

完美运行。谢谢！
有没有办法只在点击我的一个分页链接并刷新页面时才发生这种情况？当用户第一次点击主链接到达页面时，它现在会滚动。

【解决方案2】：

我相信 animate 函数在分配目标之前正在运行。我会使用 Promise 来解决这个问题。

 var target = $.deferred;
 target.resolve("latest");
 $.when(target).done(function scrollTo(where){
    $('html, body').animate({
        scrollTop: $('#'+where).offset().top
    }, 900,'swing');
    return false;
});

【讨论】：

【解决方案3】：

这就是我只使用 javascript 的方式：

if (window.location.hash) {
  var hash = window.location.hash;
  var element = document.querySelector(hash);
  
  if (element)
    element.scrollIntoView({
      behavior: "smooth",
      block: "nearest",
      inline: "start",
    });
}

【讨论】：