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

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

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

полная ссылка в MDN docs:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

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

1. мой ответ на stackoverflow
2. аналогичный вопрос

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

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

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

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

ie. для вышеуказанного вопроса, если намерение состоит в том, чтобы прокрутить экран до div с идентификатором '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];
    }
}

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

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

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

чтобы перейти к данному элементу, просто сделал это javascript только решение ниже.

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

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

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

/**
 *
 * 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);
    }
};

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

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

например@:

http://jsfiddle.net/Vgrey/

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

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)

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

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

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

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

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

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

осмотревшись вокруг много, это то, что, наконец, сработало для меня:

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

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

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

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

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

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

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

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

в случае, если вы хотите использовать html, вы можете просто использовать это:

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

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

попробовать эту функцию

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

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