Как плавно прокручивать сверху до определенного div с идентификатором, указанным в url

Question

У меня есть URL-адрес, например. www.website.com/#divIdToScrollTo

Проблема:

что я хочу здесь на странице загрузки, будут извлечены идентификатор следующий # [который уже был упомянут в качестве идентификатора целевого дел. ]. И когда страница полностью загружена, страница должна сначала оставаться наверху, а затем плавно начинать прокрутку к div с продолжительностью в 5 секунд.

Текущий подход:

var elem = $('#_' + window.location.hash.replace('#', '')); 
    if(elem) { 

     $('html, body').animate({ 
      scrollTop: $(elem).offset().top 
     }, 5000); 
    } 

Мое текущее решение извлекает идентификатор из URL и на странице загрузки непосредственно присутствует в целевом дел. Я не вижу гладкой прокрутки.

Итак, могу ли я достичь гладкой прокрутки, которую я ищу здесь. Поделитесь своими мыслями. [С КОДОМ]

Answer 1

Возможно, вам придется рассмотреть параметр url вместо хеш-фрагмента. Если вы загружаете страницу с фрагментом URL-адреса, я считаю, что он автоматически перейдет на этот идентификатор в контенте, и я не уверен, что вы можете это предотвратить. Там может быть Hacky способ сделать это, запустив что-то вроде:

$(document).ready(function(){ 
    // in order to "reset" back to the top 
    $("html, body").scrollTop(0); 

    // and THEN run your animate scroll function here. 
}); 

В противном случае URL пары подхода я говорил, вы бы ваш URL выглядеть следующим образом:

www.website.com/?section=aboutMe 

, а затем в код:

function getParameterByName(name) { 
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"); 
    var results = regex.exec(location.search); 

    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")); 
} 

var section = getParameterByName("section"); 

$('html, body').animate({ 
     scrollTop: $("#" + section).offset().top 
}, 5000); 

Схватил функцию getParameterByName из этой темы: How can I get query string values in JavaScript?