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, але вам може знадобитися прокручування всередині проділів, що прокручуються, на будь-якій кількості рівнів.

Властивість 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) - це місце, де в документі прокручується верхню частину сторінки. scrollДля прокрутки сторінки так, щоб у верхній частині сторінки було вказано вказане вами.

Тут вам потрібні деякі стилі, якими керується Javascript. Скажіть, якщо ви хочете, щоб діва не була на екрані і прокручуйте праворуч, ви встановите лівий атрибут діла на ширину сторінки, а потім зменшите його на встановлену суму кожні кілька секунд, поки він не стане там, де ви хочете.

Це має вказувати на вас у правильному напрямку.

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

Існує плагін 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 саме для цього одна мета.

Ура!

EDIT: Гаразд ... так через декілька секунд після публікації цього повідомлення я побачив ще одну відповідь трохи нижче моєї (не впевнений, чи все-таки нижче мене після редагування), яка сказала:

document.getElementById ('your_element_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;
      }
    }
  });

Виправте мене, якщо я помиляюся, але я читаю питання знову і знову і все ще думаю, що Angus McCoteup запитував, як встановити елемент для позиції: fix.

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