延遲後的JS滾動

我試圖讓我的網站滾動到單獨頁面上的特定帖子。我想到了PHP的背後部分爲我生成錨點，但是我被JS部分困住了。我設法讓網頁從位置0,0開始，然後轉到靜態錨標籤。我所苦惱的是如何讓JS從當前URL獲取錨點標記，然後在短暫延遲後使其平滑滾動到給定標記。延遲後的JS滾動

我當前的代碼是：

$(document).ready(function() { 
    if (location.hash) { 
     window.scrollTo(0, 0); 
     } 
}); 

setTimeout("window.location.hash = '#scroll';", 5000);

我發現下面的文檔片斷，其獲取的錨標記過的網址，但我不知道我怎樣才能讓它在一定的延遲後執行。

$(document).ready(function() { 
     function filterPath(string) { 
     return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
     } 
     var locationPath = filterPath(location.pathname); 
     var scrollElem = scrollableElement('html', 'body'); 

     $('a[href*=#]').each(function() { 
     var thisPath = filterPath(this.pathname) || locationPath; 
     if ( locationPath == thisPath 
     && (location.hostname == this.hostname || !this.hostname) 
     && this.hash.replace(/#/,'')) { 
      var $target = $(this.hash), target = this.hash; 
      if (target) { 
      var targetOffset = $target.offset().top; 
      $(this).click(function(event) { 
       event.preventDefault(); 
       $(scrollElem).animate({scrollTop: targetOffset}, 400, function() { 
       location.hash = target; 
       }); 
      }); 
      } 
     } 
     }); 

     // use the first element that is "scrollable" 
     function scrollableElement(els) { 
     for (var i = 0, argLength = arguments.length; i <argLength; i++) { 
      var el = arguments[i], 
       $scrollElement = $(el); 
      if ($scrollElement.scrollTop()> 0) { 
      return el; 
      } else { 
      $scrollElement.scrollTop(1); 
      var isScrollable = $scrollElement.scrollTop()> 0; 
      $scrollElement.scrollTop(0); 
      if (isScrollable) { 
       return el; 
      } 
      } 
     } 
     return []; 
     } 

    });

來源

2012-11-08 Ninetou

我設法解決使用片段，我就發現CSS-Tricks forum我的問題。它在頁面加載時滾動到一個定位標記，始終從頁面的頂部開始。

$(window).bind("ready", function() { 
    var urlHash = window.location.href.split("#")[1]; 
    $('html,body').animate({scrollTop:$('a[href="#'+urlHash+'"]').offset().top}, 1500);   
});

來源

2012-11-10 17:35:45 Ninetou

我不相信setTimeout接受任何作爲字符串傳遞的舊代碼，只有函數名稱。嘗試使用匿名函數：

setTimeout(function() { window.location.hash = '#scroll'; }, 5000);

來源

2012-11-08 20:19:31 sgroves

將一個字符串傳遞給setTimeout/Interval是有效的，並且有效，這只是不好的做法。 'setTimeout（「alert（'Hello！'）」，1000）;' – Stecman

哦，很奇怪。 javascript很奇怪。 – sgroves

我現在的代碼實際上工作正常，你的代碼也是如此。我試圖獲得平滑的滾動效果，主要是因爲我的JS知識非常有限，我只是不知道如何將兩個片段（我之前提到過）連接在一起。 – Ninetou

延遲後的JS滾動

回答

相關問題