Question

我创建了一个带有自定义分页功能的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;
        });
    });
});

有更好的方法吗？

Answer 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

Answer 2

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

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

Answer 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",
    });
}

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

3 个答案: