平滑滚动 -

Question

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

例如，在下一页中，右侧边栏中的 "Post a Job" link/button 不起作用 - 单击 link 没有任何作用 - 甚至无法打开页面.

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

如果书签 link 在带有书签的页面上，则它有效 - 请参阅边栏中的“Post 一份工作 link/button。

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，如果您在其他地方，它会抛出未定义。

考虑到没有可用的 fiddle 示例，解决方案可能多种多样，但一个可能是：

将 #createjobposting 表格放在 /graphic-designer/ 上，并且显示 post 作业 按钮的所有其他作业项目（如果您希望保留滚动行为，建议这样做）。
或使用完整的 URL link 到：https://indianashrm.staging.wpengine.com/job-board/#createjobposting（如果您在其他地方，这将重新加载到该位置）

平滑滚动 -

Smooth Scrolling -

jquery

smooth-scrolling