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

Smooth scroll to desired section on page load

本文关键字：分页 加载 滚动 平滑      更新时间：2023-09-26

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

有更好的方法吗?

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

将ready改为load

.ready() vs. .load()

在大多数情况下，只要DOM层次结构已经运行，脚本就可以运行已经完全建成。传递给.ready()的处理程序是有保证的在DOM准备好之后执行，所以这通常是最好的

在代码依赖于加载资产的情况下(例如，如果图像的尺寸是必需的)，代码应该放在加载事件的处理程序。

下面是我的函数:

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

JSFiddle

我认为在目标被分配之前，animate函数正在运行。我会用承诺来解决这个问题。

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

这是我如何做到只有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",
    });
}
相关文章：