平滑滚动 -

Question

我实现了以下代码来启用平滑滚动。问题是它似乎不允许书签链接不在书签页面上时工作。

例如，在以下页面上，右侧边栏中的“发布工作”链接/按钮不起作用 - 单击该链接没有任何作用 - 甚至无法打开页面。

https://indianashrm.staging.wpengine.com/job-board/graphic-designer/

如果书签链接在带有书签的页面上，它可以工作 - 请参阅“在侧边栏中发布工作链接/按钮。

https://indianashrm.staging.wpengine.com/job-board/

有什么想法吗？

<script>
jQuery(document).ready(function($){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function(){

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});
</script>

Answer 1

滚动行为设置为仅在此位置起作用： https://indianashrm.staging.wpengine.com/job-board/#createjobposting

并且#createjobposting 表单不在加载的页面中（https://indianashrm.staging.wpengine.com/job-board/graphic-designer/），但是当您在/job-board/ 中时。

如果您还打算在job-board 之外使用按钮滚动行为，请不要使用this.hash，如果您在其他地方，它将抛出未定义。

考虑到没有可行的小提琴示例，解决方案可能多种多样，但一种可能是：

• 将#createjobposting 表格放在/graphic-designer/ 和 您拥有的所有其他显示发布工作按钮的工作项（如果您希望保留滚动行为，建议您这样做）。

• 或使用完整的 URL 链接到：https://indianashrm.staging.wpengine.com/job-board/#createjobposting（如果您在其他地方，这将重新加载到该位置）