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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сложность прокрутки заключается в том, что вам может потребоваться не только прокручивать страницу, чтобы отобразить 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);
  }
}

Если вы не хотите добавлять дополнительное расширение, следующий код должен работать с 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;
        }
    });

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

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

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

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

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

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

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

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

Вуаля!

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

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

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

Я лично нашел ответ Джоша на основе 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;
      }
    }
  });

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

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

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

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

Вы можете использовать метод 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

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