Frage Wie scrolle ich mit JavaScript zu einem Element?


Ich versuche die Seite auf a zu verschieben <div> Element.

Ich habe den nächsten Code vergeblich versucht:

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

74
2018-02-15 18:02


Ursprung


Antworten:


Sie können einen Anker verwenden, um das div zu "fokussieren". I.e:

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

und dann benutze das folgende Javascript:

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

81
2018-02-15 18:08



scrollIntoView funktioniert gut:

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

vollständige Referenz in den MDN-Dokumenten:
https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView


103
2018-03-10 04:17



Ihre Frage und die Antworten sehen anders aus. Ich weiß nicht, ob ich mich irre, aber für diejenigen, die googeln und hier ankommen, wäre meine Antwort wie folgt:

  1. Meine Antwort auf stackoverflow
  2. Eine ähnliche Frage

Meine Antwort erklärte:

Hier ist ein einfaches Javascript dafür

Rufen Sie dies auf, wenn Sie den Bildschirm zu einem Element mit id = "yourSpecificElementId" scrollen müssen

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

dh. für die obige Frage, wenn die Absicht ist, den Bildschirm zum Div mit der ID 'DivFirst' zu scrollen

der Code wäre: window.scroll(0,findPos(document.getElementById("divFirst")));

und Sie benötigen diese Funktion für das Arbeiten:

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

Der Bildschirm wird zu Ihrem spezifischen Element gescrollt.


83
2017-08-16 11:44



Um zu einem bestimmten Element zu blättern, haben Sie einfach diese Javascript-Lösung unten gemacht.

Einfache Verwendung:

EPPZScrollTo.scrollVerticalToElementById('signup_form', 20);

Engine-Objekt (Sie können mit Filter, fps-Werte geigen):

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

7
2017-12-18 23:33



Versuche dies:

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

z.B @:

http://jsfiddle.net/Vgrey/


6
2018-02-15 18:08



Ich habe ein bisschen in diese Sache hineingeschaut und ich habe mir das hier ausgedacht, was irgendwie der natürlichste Weg ist, es zu tun. Natürlich ist das jetzt meine persönliche Lieblingsrolle. :)

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

5
2018-04-15 13:17



Nun, ich fand diese scrollToElement () -Funktion von der Quelle von Welligkeit:

function scrollToElement(element) {
  var el = document.getElementById(element);
  var yPos = el.getClientRects()[0].top;
  var yScroll = window.scrollY;
  var interval = setInterval(function() {
    yScroll -= 10;
    window.scroll(0, yScroll);
    if (el.getClientRects()[0].top >= 0) {
      clearInterval(interval);
    }
  }, 5);
}

Wenn Sie möchten, ist hier eine findPos (Objekt) Alternative:

function findPos(obj) {
  var curleft = 0,
    curtop = 0;
  do {
    curleft += obj.offsetLeft;
    curtop += obj.offsetTop;
  } while (obj = obj.offsetParent);
  return {
    left: curleft,
    top: curtop
  };
}

4
2018-02-23 15:28



Der Fokus kann nur für interaktive Elemente festgelegt werden. Div stellt nur einen logischen Abschnitt der Seite dar.

Vielleicht können Sie die Grenzen um div setzen oder die Farbe ändern, um einen Fokus zu simulieren. Und ja, Visiblity ist kein Fokus.


2
2018-02-15 18:05



Ich denke, wenn du deinem div einen Tabindex hinzufügst, wird es in der Lage sein, den Fokus zu bekommen:

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

Ich glaube nicht, dass es gültig ist, tabindex kann nur auf a, Bereich, Button, Eingabe, Objekt, select und textarea angewendet werden. Aber versuchen Sie es.


2
2018-02-15 18:07



Hier ist eine Funktion, die einen optionalen Offset für diese festen Header enthalten kann. Keine externen Bibliotheken benötigt.

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

Sie können die Höhe eines Elements mit JQuery erfassen und zu diesem navigieren.

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

Aktualisierung März 2018

Scrollen Sie zu dieser Antwort, ohne JQuery zu verwenden

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

2
2018-06-27 17:41



Du kannst dich nicht auf ein Div konzentrieren. Sie können nur auf ein Eingabeelement in diesem div fokussieren. Außerdem müssen Sie element.focus () anstelle von display () verwenden


0
2018-02-15 18:07