2014-12-30 2 views
3

Таким образом, я получил следующий код:JQuery .scrollTop не прокрутка должным образом

$(document).ready(function(){ 
    if(window.location.hash) { 
    $('body,html').animate({ 
     scrollTop: $(window.location.hash).offset().top 
    }, 1000); 

    } 
}) 

Что я построил с помощью кода, взятых из StackOverflow. Я вызываю страницу в url#destination, поэтому на самом деле она должна прокручиваться до элемента, чей идентификатор является страницей Hash. Элемент существует, и страница прокручивается вниз, но не до точного смещения элемента, но немного выше. Это может быть очень хорошо, но я хочу, чтобы он работал так, как я ожидал.
Так что я теперь покажу вам результаты консоли:

>>>$("body").scrollTop() 
>1155 

>>>$("#aboutus").offset().top 
>1672.890625 

Может кто-нибудь объяснить мне это? Потому что я ничего не могу понять здесь.

+0

Это работает для меня хорошо. Попробуйте создать пустую страницу, где нет ничего, только jquery и 3 divs, первый и третий с большой высотой, и попробуйте прокрутить ко второму. – vaso123

ответ

3

Хммм ... Он отлично работает для меня. Возможно, проблема в том, что, как указал пользователь в комментариях, элементы еще не загружены, поэтому вы должны использовать $(window).load(). Но если вы это используете, ваш код не будет работать нормально, поскольку браузеры имеют встроенный метод, который, когда хэш существует в URL-адресе, идет непосредственно туда, где элемент, чей идентификатор является хешем. Это происходит потому, что это действие запускается до обнаружения события .load в вашем javascript-коде. Итак, если вы хотите, чтобы убедиться, что код работает, замените ориентации элемента с другим атрибутом, как:

$(window).on("load", function(){ 
    if(window.location.hash) { 
    setTimeout(function(){ 
     $('body,html').animate({ 
     scrollTop: $('*[idt="'+(window.location.hash).replace("#", "")+'"]').offset().top 
     }, 1000); 
    }, 130) 


    } 
}) 

Это должно сделать полностью уверено, что анимация работает правильно, так как нет ни одного элемента, который имеет такой хэш , и код js управляется одинаково.

+0

Отлично! Благодаря! Это прекрасно работает – qaztype

+0

Тем не менее, я уверен, что есть лучший способ сделать это. –

Смежные вопросы