Jak przewinąć do elementu za pomocą JavaScript?

Próbuję przenieść stronę do <div>elementu.

Próbowałem następnego kodu bez skutku:

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

Możesz użyć kotwicy, aby „skupić” element div. To znaczy:

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

a następnie użyj następującego javascript:

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

scrollIntoView działa dobrze:

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

pełne odniesienie w dokumentacji MDN:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

Twoje pytanie i odpowiedzi wyglądają inaczej. Nie wiem, czy się mylę, ale dla tych, którzy szukają w Google i docierają tutaj, moja odpowiedź byłaby następująca:

1. Moja odpowiedź na temat stackoverflow
2. Podobne pytanie

Moja odpowiedź wyjaśniła:

tutaj jest prosty skrypt javascript do tego

wywołaj to, gdy chcesz przewinąć ekran do elementu, który ma id = "yourSpecificElementId"

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

to znaczy. na powyższe pytanie, jeśli intencją jest przewinięcie ekranu do div o identyfikatorze 'divFirst'

kod wyglądałby następująco: window.scroll(0,findPos(document.getElementById("divFirst")));

i potrzebujesz tej funkcji do pracy:

//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];
    }
}

ekran zostanie przewinięty do konkretnego elementu.

Dla Chrome i Firefox

Trochę się temu przyglądałem i znalazłem ten, który wydaje się być najbardziej naturalnym sposobem na zrobienie tego. Oczywiście jest to teraz mój ulubiony zwój. :)

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

Dla zwolenników IE, Edge i Safari

Pamiętaj, że window.scroll({ ...options })nie jest obsługiwane w przeglądarkach IE, Edge i Safari. W takim przypadku najlepiej jest użyć element.scrollIntoView(). (Obsługiwane w IE 6). Najprawdopodobniej możesz (czytaj: nieprzetestowane) przekazać opcje bez żadnych skutków ubocznych.

Można je oczywiście opakować w funkcję, która zachowuje się w zależności od używanej przeglądarki.

Spróbuj tego:

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

np. @:

http://jsfiddle.net/Vgrey/

Aby przewinąć do danego elementu, po prostu zrobiłem to rozwiązanie tylko javascript poniżej.

Proste użycie:

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

Obiekt silnika (możesz bawić się filtrem, wartościami 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);
    }
};

Oto funkcja, która może zawierać opcjonalne przesunięcie dla tych stałych nagłówków. Żadne zewnętrzne biblioteki nie są potrzebne.

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

Możesz pobrać wysokość elementu za pomocą JQuery i przewinąć do niego.

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

Aktualizacja marzec 2018

Przewiń do tej odpowiedzi bez używania JQuery

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

Możesz ustawić fokus na element. Działa lepiej niżscrollIntoView

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

node.focus()

node.removeAttribute('tabindex')

Najlepsza, najkrótsza odpowiedź, że to, co działa nawet z efektami animacji:

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

Jeśli masz stały pasek nawigacji, po prostu odejmij jego wysokość od górnej wartości, więc jeśli stała wysokość paska wynosi 70 pikseli, linia 2 będzie wyglądać następująco:

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

Objaśnienie: Linia 1 pobiera pozycję elementu Linia 2 przewija do pozycji elementu; behaviorwłaściwość dodaje płynny efekt animacji

Fokus można ustawić tylko na elementach interaktywnych ... DIV reprezentują tylko logiczną sekcję strony.

Być może możesz ustawić obramowanie wokół div lub zmienić jego kolor, aby zasymulować ostrość. I tak Widoczność nie jest skupiona.

Myślę, że jeśli dodasz tabindex do swojego div, będzie on mógł uzyskać fokus:

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

Nie sądzę jednak, że jest to poprawne, tabindex można zastosować tylko do obszaru, przycisku, wejścia, obiektu, zaznaczenia i obszaru tekstu. Ale spróbuj.

Podobne do rozwiązania @ caveman

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

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

Nie możesz skupić się na div. Możesz skupić się tylko na elemencie wejściowym w tym div. Ponadto musisz użyć element.focus () zamiast display ()

Po długim rozglądaniu się, to w końcu zadziałało:

1. Znajdź / zlokalizuj div w swojej domenie, który ma pasek przewijania. Dla mnie wyglądało to tak: "div class =" table_body table_body_div "scroll_top =" 0 "scroll_left =" 0 "style =" width: 1263px; wysokość: 499px; "

2. Zlokalizowałem to za pomocą tej ścieżki xpath: // div [@ class = 'table_body table_body_div']

3. Użył JavaScript do wykonania przewijania w następujący sposób: (JavascriptExecutor) sterownik) .executeScript ("arguments [0] .scrollLeft = arguments [1];", element, 2000);

2000 to liczba pikseli, które chciałem przewinąć w prawo. Użyj scrollTop zamiast scrollLeft, jeśli chcesz przewijać div w dół.

Uwaga: próbowałem użyć scrollIntoView, ale nie działało to poprawnie, ponieważ moja strona internetowa zawierała wiele elementów div. Będzie działać, jeśli masz tylko jedno główne okno, w którym znajduje się fokus. To najlepsze rozwiązanie, z jakim się spotkałem, jeśli nie chcesz używać jQuery, czego ja nie chciałem.

Metoda, której często używam do przewijania kontenera do jego zawartości.

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

jeśli chcesz nadpisać globalnie, możesz również zrobić:

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

Ze względu na zachowanie "płynne" nie działa w Safari, Safari ios, Explorer. Zwykle piszę prostą funkcję wykorzystującą 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)
    })
  }

})();

Jeśli chcesz używać html, możesz po prostu użyć tego:

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

i uczyń z niego link html do określonego identyfikatora elementu. Jego zasadniczo getElementByIdwersja html.

spróbuj tej funkcji

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

Przekaż id div jako parametr, który zadziała. Już go używam