在同一页面上平滑滚动不起作用

Question

我正在尝试使用 jQuery 中的 PHP 代码在同一页面上实现平滑滚动（尝试使用 PHP 生成最终的 jquery 代码）。但由于某种原因它不起作用，如果有人能指出错误或为什么它不起作用，我将不胜感激

// When the Document Object Model is ready
   jQuery(document).ready(function(){
   // 'scroll' is the amount of pixels destination
   // is from the top of the document
   var scroll = jQuery('<?php echo get_option('smooth_scroll'); ?>').offset().top;

// When button is clicked
  jQuery('.test').click(function(){
   // Scroll down to 'scroll'
   jQuery('html, body').animate({scrollTop:scroll}, 'slow');
   // Stop the link from acting like a normal anchor link
   return false;
  });
});

我有一个带有“test”类的href链接。单击该按钮时，我希望它平滑滚动以转到同一页面的特定 div[通过 get_option('smooth_scroll')] div 将由用户更新）。

Answer 1

首先——请尝试将滚动变量赋值移动到点击事件中：

jQuery(function(){
  jQuery('.test').on('click', function(e){
    e.preventDefault();
    var scroll = jQuery('<?php echo get_option('smooth_scroll'); ?>').offset().top;
    jQuery('html, body').animate({scrollTop:scroll}, 'slow');
  });
});

因为目前您可能会遇到元素不在其最终位置的情况 - 因为它是根据 DOMContentLoaded 事件计算的，该事件在加载完整的 DOM 结构后调用，但此时无法加载 CSS/JS/图像资产时刻，什么会影响计算结果。