JavaScript滾動到錨點

Question

遇到JavaScript / jQuery的一些問題。

我們目前正在使用Visual Composer（WordPress插件）中的“短代碼”創建（水平）標簽。 我們做了一些自定義更改，但只能在視覺上（images / css）。

我們正在努力使其在您單擊選項卡時自動向下滾動到內容。

我試過將腳本包裝進去

jQuery(document).ready( function({});
jQuery(window).ready( function({});

並嘗試用.load（）替換.ready （）

jQuery(".pws_tabs_controlls_item").children().click(function(){
    jQuery('html, body').animate({
         scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
});

然而！ 如果您復制整個腳本並將其粘貼到Chrome / Firefox中的控制台中，它將按預期工作，基於我說它自己運行的腳本，感覺它沒有加載或注冊或w / e。

我們有沒有（明顯的）問題/錯誤？

如有必要，我很樂意提供更多信息（例如網站地址）

任何幫助將不勝感激！

Answer 1

VisualComposer插件僅在document准備好后呈現，這就是它無法正常工作的原因。

解決問題的最佳方法是使用jQuery的事件委托 ，例如：

jQuery(document).on('click', '.pws_tabs_controlls_item > a', function() {
    jQuery('html, body').animate({
         scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
});

---

UPDATE

在您的評論之后，我可以看到.pws_tabs_controlls_item元素中的錨標記已經有一個click事件監聽器，它也使用了event.stopPropagation() ，所以我的代碼永遠不會被執行。

解決問題的另一種方法是在元素可用時進行臟檢查 ，例如：

function waitForAvailability(selector, callback) {
  if (jQuery('selector').length === 0) {
    callback();
  }
  else {
    setTimeout(function() {
      waitForAvailability(selector, callback);
    }, 0);
  }
}

然后，您可以使用您已經使用的代碼，類似於：

waitForAvailability('.pws_tabs_controlls_item', function() {
  jQuery(".pws_tabs_controlls_item").children().click(function(){
    jQuery('html, body').animate({
      scrollTop: jQuery(".ts-fancy-tabs-container").offset().top
    }, 700, 'swing', function () {});
  });
});