JQuery переместить в якорную позицию при загрузке страницы - PullRequest
66 голосов
/ 16 января 2012

У меня есть простая настройка страницы, такая как:

<div id="aboutUs">
  About us content...
</div>
<div id="header">
  Header content...
</div>

Когда страница загружается, мне нужно, чтобы страница автоматически прокручивалась вниз (анимация не требовалась) до #header, поэтому пользователь не может видеть раздел «О нас», пока не прокрутит вверх.

#aboutUs имеет фиксированную высоту, поэтому нет необходимости в каких-либо переменных для определения высоты или чего-либо еще ... если это вообще необходимо.

Я наткнулся на этот другой вопрос и попытался изменить некоторые ответы для моей ситуации, но, похоже, ничего не помогло.

Любая помощь будет оценена.

Ответы [ 3 ]

117 голосов
/ 16 января 2012

Описание

Вы можете сделать это, используя jQuery .scrollTop() и .offset() метод

Посмотрите мой образец и эту демонстрацию jsFiddle

Пример

$(function() {
    $(document).scrollTop( $("#header").offset().top );  
});

Дополнительная информация

25 голосов
/ 16 января 2012

Вы пробовали метод JQuery scrollTo? http://demos.flesler.com/jquery/scrollTo/

Или вы можете расширить JQuery и добавить свой собственный метод:

jQuery.fn.extend({
 scrollToMe: function () {
   var x = jQuery(this).offset().top - 100;
   jQuery('html,body').animate({scrollTop: x}, 400);
}});

Затем вы можете вызвать этот метод, как:

$("#header").scrollToMe();
15 голосов
/ 29 апреля 2014

Поместите это прямо перед закрывающим тегом Body внизу страницы.

<script>
    if (location.hash) {
        location.href = location.hash;
    }
</script>

jQuery на самом деле не требуется.

...