JavaScript для прокрутки длинной страницы до DIV

У меня есть ссылка на длинной HTML-странице. Когда я щелкаю по нему, я хочу, чтобы divдругая часть страницы отображалась в окне при прокрутке.

Немного как EnsureVisibleна других языках.

Я проверил scrollTopи , scrollToно они кажутся красной селедкой.

Кто-нибудь может помочь?

старый вопрос, но если кто-нибудь найдет это через google (как я) и кто не хочет использовать якоря или jquery; есть встроенная функция javascript для «перехода» к элементу;

document.getElementById('youridhere').scrollIntoView();

а что еще лучше; согласно отличным таблицам совместимости в quirksmode, это поддерживается всеми основными браузерами !

Если вы не хотите добавлять дополнительное расширение, следующий код должен работать с jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });

Как насчет JQuery ScrollTo - см. Этот пример кода

<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Никакой сложной прокрутки, но она должна вас туда привести.

Сложность прокрутки заключается в том, что вам может потребоваться не только прокручивать страницу, чтобы отобразить div, но также может потребоваться прокрутка внутри прокручиваемых div на любом количестве уровней.

Свойство scrollTop доступно для любого элемента DOM, включая тело документа. Установив его, вы можете контролировать, насколько далеко что-то прокручивается. Вы также можете использовать свойства clientHeight и scrollHeight, чтобы увидеть, сколько требуется прокрутки (прокрутка возможна, когда clientHeight (область просмотра) меньше scrollHeight (высота содержимого).

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

Чтобы создать действительно универсальную процедуру «прокрутки в поле зрения» с нуля, вам нужно будет начать с узла, который вы хотите открыть, убедиться, что он находится в видимой части своего родителя, затем повторить то же самое для родителя и т. Д., Все путь, пока не достигнете вершины.

Один шаг этого будет выглядеть примерно так (непроверенный код, без проверки крайних случаев):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}

Вы можете использовать Element.scrollIntoView()метод, упомянутый выше. Если вы оставите его без параметров внутри, у вас будет мгновенная уродливая прокрутка . Чтобы предотвратить это, вы можете добавить этот параметр - behavior:"smooth" .

Пример:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Просто замените scroll-here-plzсвой divэлемент или на веб-сайте. И если вы видите свой элемент в нижней части окна или позиция не такая, как вы ожидали, поиграйте с параметром block: "". Вы можете использовать block: "start", block: "end"илиblock: "center" .

Помните: всегда используйте параметры внутри объекта {}.

Если проблема не исчезнет, ​​перейдите на https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView.

Для этого метода есть подробная документация.

Это сработало для меня

document.getElementById('divElem').scrollIntoView();

Ответ размещен здесь - такое же решение вашей проблемы.

Изменить: ответ JQuery очень хорош, если вам нужна плавная прокрутка - я раньше не видел этого в действии.

Почему не названный якорь?

Вам нужно свойство location.hash. Например:

location.hash = 'top'; // перейдет к названной якорной "вершине"

Я не знаю, как сделать красивую анимацию прокрутки без использования додзё или подобного инструментария, но если вам просто нужно перейти к привязке, location.hash должен это сделать.

(проверено на FF3 и Safari 3.1.2)

Я не могу добавить комментарий к ответу Futtta выше, но для более плавного использования прокрутки:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"

scrollTop (IIRC) - это место, где в документе прокручивается верхняя часть страницы. scrollTo прокручивает страницу так, чтобы верхняя часть страницы находилась там, где вы указываете.

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

Это должно указать вам правильное направление.

Дополнительно: извините, я подумал, что вы хотите, чтобы откуда-то «выскочил» отдельный div (вроде того, что иногда делает этот сайт), а не перемещать всю страницу в раздел. Этого эффекта можно добиться при правильном использовании анкеров.

Существует плагин jQuery для общего случая прокрутки к элементу DOM, но если производительность является проблемой (а когда это не так?), Я бы предложил сделать это вручную. Это включает в себя два этапа:

1. Определение позиции элемента, к которому вы прокручиваете.
2. Прокрутка до этой позиции.

quirksmode дает хорошее объяснение механизма, лежащего в основе первого. Вот мое предпочтительное решение:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Он использует приведение от нуля к 0, что в некоторых кругах не соответствует этикету, но мне это нравится :) Во второй части используется window.scroll. Итак, остальное решение:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Вуаля!

Я лично нашел ответ Джоша на основе jQuery выше лучшим, что я видел, и отлично работал для моего приложения ... конечно, я уже был использовал jQuery ... Я бы точно не включил всю библиотеку jQ только для этого одна цель.

Ура!

РЕДАКТИРОВАТЬ: ОК ... всего через несколько секунд после публикации я увидел еще один ответ чуть ниже моего (не уверен, что все еще ниже меня после редактирования), в котором говорилось, что нужно использовать:

document.getElementById ('ваш_элемент_ID_here'). scrollIntoView ();

Это работает отлично и с гораздо меньшим количеством кода, чем версия jQuery! Я понятия не имел, что в JS есть встроенная функция под названием .scrollIntoView (), но она есть! Итак, если вам нужна модная анимация, перейдите на jQuery. Быстро и грязно ... используйте это!

Для плавной прокрутки полезен этот код

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });

Поправьте меня, если я ошибаюсь, но я читаю вопрос снова и снова и все еще думаю, что Ангус МакКотеуп спрашивал, как установить элемент в положение position: fixed.

Angus McCoteup, проверьте http://www.cssplay.co.uk/layouts/fixed.html - если вы хотите, чтобы ваш DIV вел себя как меню, посмотрите там CSS