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

Question

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

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

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

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

Answer 1

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

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

Answer 2

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

$('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;
      }
    }
  });

Answer 3

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

Ура! * * 1005

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

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

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

Answer 4

Существует плагин 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));
}

Voila!

Answer 5

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

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

Answer 6

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

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

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

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