Как прокрутить элемент с помощью JavaScript?

Я пытаюсь переместить страницу в <div>элемент.

Я пробовал следующий код безрезультатно:

document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

Вы можете использовать якорь, чтобы "сфокусировать" div. То есть:

<div id="myDiv"></div>

а затем используйте следующий JavaScript:

// the next line is required to work around a bug in WebKit (Chrome / Safari)
location.href = "#";
location.href = "#myDiv";

scrollIntoView работает хорошо:

document.getElementById("divFirst").scrollIntoView();

Полная ссылка в документах MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Ваш вопрос и ответы выглядят иначе. Я не знаю, ошибаюсь ли я, но для тех, кто гуглит и достигает здесь, мой ответ будет следующим:

1. Мой ответ на stackoverflow
2. Похожий вопрос

Мой ответ объяснил:

вот простой JavaScript для этого

вызывайте это, когда вам нужно прокрутить экран до элемента, который имеет id = "yourSpecificElementId"

window.scroll(0,findPos(document.getElementById("yourSpecificElementId")));

то есть. для вышеупомянутого вопроса, если намерение состоит в том, чтобы прокрутить экран до div с id 'divFirst'

код будет: window.scroll(0,findPos(document.getElementById("divFirst")));

и вам нужна эта функция для работы:

//Finds y value of given object
function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

экран будет прокручен до вашего конкретного элемента.

Для Chrome и Firefox

Я немного разбирался в этом, и я понял, какой-то самый естественный способ сделать это. Конечно, теперь это мой личный любимый свиток. :)

const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});

Для сторонников IE, Edge и Safari

Обратите внимание, что window.scroll({ ...options })не поддерживается в IE, Edge и Safari. В этом случае, скорее всего, лучше всего использовать element.scrollIntoView(). (Поддерживается в IE 6). Скорее всего, вы можете (читай: не проверено) передавать опции без каких-либо побочных эффектов.

Они, конечно, могут быть заключены в функцию, которая ведет себя в соответствии с тем, какой браузер используется.

Попробуй это:

var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible'; 
divFirst.style.display = 'block';  
divFirst.tabIndex = "-1";  
divFirst.focus();

например, @:

http://jsfiddle.net/Vgrey/

Чтобы прокрутить до заданного элемента, просто сделайте это решение только для JavaScript ниже.

Простое использование:

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

Объект движка (вы можете поиграть с фильтром, значениями в секунду):

/**
 *
 * Created by Borbás Geri on 12/17/13
 * Copyright (c) 2013 eppz! development, LLC.
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 *
 */


var EPPZScrollTo =
{
    /**
     * Helpers.
     */
    documentVerticalScrollPosition: function()
    {
        if (self.pageYOffset) return self.pageYOffset; // Firefox, Chrome, Opera, Safari.
        if (document.documentElement && document.documentElement.scrollTop) return document.documentElement.scrollTop; // Internet Explorer 6 (standards mode).
        if (document.body.scrollTop) return document.body.scrollTop; // Internet Explorer 6, 7 and 8.
        return 0; // None of the above.
    },

    viewportHeight: function()
    { return (document.compatMode === "CSS1Compat") ? document.documentElement.clientHeight : document.body.clientHeight; },

    documentHeight: function()
    { return (document.height !== undefined) ? document.height : document.body.offsetHeight; },

    documentMaximumScrollPosition: function()
    { return this.documentHeight() - this.viewportHeight(); },

    elementVerticalClientPositionById: function(id)
    {
        var element = document.getElementById(id);
        var rectangle = element.getBoundingClientRect();
        return rectangle.top;
    },

    /**
     * Animation tick.
     */
    scrollVerticalTickToPosition: function(currentPosition, targetPosition)
    {
        var filter = 0.2;
        var fps = 60;
        var difference = parseFloat(targetPosition) - parseFloat(currentPosition);

        // Snap, then stop if arrived.
        var arrived = (Math.abs(difference) <= 0.5);
        if (arrived)
        {
            // Apply target.
            scrollTo(0.0, targetPosition);
            return;
        }

        // Filtered position.
        currentPosition = (parseFloat(currentPosition) * (1.0 - filter)) + (parseFloat(targetPosition) * filter);

        // Apply target.
        scrollTo(0.0, Math.round(currentPosition));

        // Schedule next tick.
        setTimeout("EPPZScrollTo.scrollVerticalTickToPosition("+currentPosition+", "+targetPosition+")", (1000 / fps));
    },

    /**
     * For public use.
     *
     * @param id The id of the element to scroll to.
     * @param padding Top padding to apply above element.
     */
    scrollVerticalToElementById: function(id, padding)
    {
        var element = document.getElementById(id);
        if (element == null)
        {
            console.warn('Cannot find element with id \''+id+'\'.');
            return;
        }

        var targetPosition = this.documentVerticalScrollPosition() + this.elementVerticalClientPositionById(id) - padding;
        var currentPosition = this.documentVerticalScrollPosition();

        // Clamp.
        var maximumScrollPosition = this.documentMaximumScrollPosition();
        if (targetPosition > maximumScrollPosition) targetPosition = maximumScrollPosition;

        // Start animation.
        this.scrollVerticalTickToPosition(currentPosition, targetPosition);
    }
};

Вот функция, которая может включать необязательное смещение для этих фиксированных заголовков. Внешние библиотеки не нужны.

function scrollIntoView(selector, offset = 0) {
  window.scroll(0, document.querySelector(selector).offsetTop - offset);
}

Вы можете получить высоту элемента, используя JQuery, и перейти к нему.

var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)

Обновление март 2018

Прокрутите до этого ответа, не используя JQuery

scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)

Вы можете установить фокус на элемент. Работает лучше чемscrollIntoView

node.setAttribute('tabindex', '-1')

node.focus()

node.removeAttribute('tabindex')

Лучший, самый короткий ответ, который работает даже с анимационными эффектами:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

Если у вас есть фиксированная навигационная панель, просто вычтите ее высоту из верхнего значения, поэтому, если ваша фиксированная высота панели составляет 70 пикселей, строка 2 будет выглядеть так:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

Пояснение: Строка 1 получает позицию элемента. Строка 2 прокручивает до позиции элемента; behaviorсвойство добавляет плавный анимированный эффект

Фокус может быть установлен только на интерактивные элементы ... Div только представляют логический раздел страницы.

Возможно, вы можете установить границы вокруг div или изменить его цвет, чтобы имитировать фокус. И да, Видимость не в фокусе.

Я думаю, что если вы добавите tabindex в ваш div, он сможет получить фокус:

<div class="divFirst" tabindex="-1">
</div>

Я не думаю, что это действительно так, хотя tabindex можно применять только к области, кнопке, вводу, объекту, выделению и текстовой области. Но попробуйте.

Похоже на решение @ caveman

const element = document.getElementById('theelementsid');

if (element) {
    window.scroll({
        top: element.scrollTop,
        behavior: 'smooth',
    }) 
}

Вы не можете сосредоточиться на div. Вы можете сосредоточиться только на элементе ввода в этом div. Также вам нужно использовать element.focus () вместо display ()

Посмотрев вокруг, вот что наконец-то сработало для меня:

1. Найти / найти div в вашем доме, который имеет полосу прокрутки. Для меня это выглядело так: "div class =" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; высота: 499 пикселей; "

2. Я нашел его с помощью этого xpath: // div [@ class = 'table_body table_body_div']

3. Использовал JavaScript для выполнения прокрутки следующим образом: (JavascriptExecutor) driver) .executeScript ("arguments [0] .scrollLeft = arguments [1];", element, 2000);

2000 - это количество пикселей, которое я хотел прокрутить вправо. Используйте scrollTop вместо scrollLeft, если вы хотите прокрутить ваш div вниз.

Примечание. Я попытался использовать scrollIntoView, но он не работал должным образом, поскольку на моей веб-странице было несколько элементов div. Это будет работать, если у вас есть только одно главное окно, где находится фокус. Это лучшее решение, с которым я столкнулся, если вы не хотите использовать jQuery, чего я не хотел.

Метод, который я часто использую для прокрутки контейнера до его содержимого.

/**
@param {HTMLElement} container : element scrolled.
@param {HTMLElement} target : element where to scroll.
@param {number} [offset] : scroll back by offset
*/
var scrollAt=function(container,target,offset){
    if(container.contains(target)){
        var ofs=[0,0];
        var tmp=target;
        while (tmp!==container) {
            ofs[0]+=tmp.offsetWidth;
            ofs[1]+=tmp.offsetHeight;
            tmp=tmp.parentNode;
        }
        container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
    }else{
        throw('scrollAt Error: target not found in container');
    }
};

если вы хотите переопределить глобально, вы также можете сделать:

HTMLElement.prototype.scrollAt=function(target,offset){
    if(this.contains(target)){
        var ofs=[0,0];
        var tmp=target;
        while (tmp!==this) {
            ofs[0]+=tmp.offsetWidth;
            ofs[1]+=tmp.offsetHeight;
            tmp=tmp.parentNode;
        }
        container.scrollTop = Math.max(0,ofs[1]-(typeof(offset)==='number'?offset:0));
    }else{
        throw('scrollAt Error: target not found in container');
    }
};

Из-за поведения «гладкий» не работает в Safari, Safari ios, Explorer. Я обычно пишу простую функцию, используя requestAnimationFrame

(function(){
    var start;
    var startPos = 0;

    //Navigation scroll page to element
    function scrollTo(timestamp, targetTop){
      if(!start) start = timestamp
      var runtime = timestamp - start
      var progress = Math.min(runtime / 700, 1)

      window.scroll(0, startPos + (targetTop * progress) )

      if(progress >= 1){
        return;
      }else {
        requestAnimationFrame(function(timestamp){
            scrollTo(timestamp, targetTop)
        })
      }
   };

  navElement.addEventListener('click', function(e){

    var target = e.target  //or this 
    var targetTop = _(target).getBoundingClientRect().top
    startPos = window.scrollY

    requestAnimationFrame(function(timestamp){
        scrollTo(timestamp, targetTop)
    })
  }

})();

Если вы хотите использовать HTML, вы можете просто использовать это:

a href="samplewebsite.com/subdivision.html#id

и сделать его HTML-ссылкой на конкретный идентификатор элемента. Его в основном getElementByIdHTML-версия.

попробуй эту функцию

function navigate(divId) {
$j('html, body').animate({ scrollTop: $j("#"+divId).offset().top }, 1500);
}

Передайте div id в качестве параметра, он будет работать, я уже его использую