No puedo entenderlo.

El elemento existe en una jerarquía anidada de múltiples elementos DIV desplazables en lugar de en una sola ventana de documento desplazable.

Uno de mis dolores de cabeza es cómo scrolled.offsetParent es document.body (color papayawhip en el código de prueba a continuación) en lugar de scrollable (color pink).

Las soluciones a este problema basadas en JQuery y otras bibliotecas son aceptables solo como complementarias, en beneficio de otros usuarios, no del mío.

Código de prueba

(Ubicación original: JSFiddle.)

function ReportExpression(ExpressionString) {
    return ExpressionString + " == " + eval(ExpressionString) + "\n";
}

function ButtonClick() {
    var scrollable = document.querySelector('#scrollable');
    var scrolled = document.querySelector('#scrolled');
    alert(
        ReportExpression("scrollable.scrollTop") +
        ReportExpression("scrolled.offsetTop") +
        ReportExpression("(scrolled.offsetParent == document.body)")
    );
    scrollable.scrollTop = scrolled.offsetTop;
}
html {background-color: white;}
body {text-align: center; background-color: papayawhip;}
#page {display: inline-block; text-align: left; width: 500px; height: 500px;
    overflow: auto; background-color: powderblue; padding: 10px;}
#scrollable {height: 500px; overflow: auto; background-color: pink;}
<body>
  <div id="page">
    <button onClick="ButtonClick();">Scroll</button>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <div id="scrollable">
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <text id="scrolled">I want to scroll all scrollbars to this element.</text>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    </div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
</body>

Artículos que he estudiado

  1. ¿Cómo me desplazo a un elemento usando JavaScript?
  2. http://www.quirksmode.org/js/findpos.html
  3. ¿Cómo desplazarse a un elemento dentro de un div?
3
7vujy0f0hy 10 may. 2016 a las 14:39

3 respuestas

La mejor respuesta

¿Qué tal esto?:

function ButtonClick() {
  var page = document.querySelector('#page');
  var scrollable = document.querySelector('#scrollable');
  var scrolled = document.querySelector('#scrolled');
  page.scrollTop = scrollable.offsetTop-page.offsetTop;
  scrollable.scrollTop = scrolled.offsetTop-scrollable.offsetTop;
}
4
Arg0n 10 may. 2016 a las 12:57

Según el primero de los enlaces que dijiste que estudiaste, he aplicado una solución desde allí.

    element = document.getElementById("scrollable");
    alignWithTop = true;
    element.scrollIntoView(alignWithTop);

    elementB = document.getElementById("scrolled");
    alignWithTopB = true;
    elementB.scrollIntoView(alignWithTopB);

Demostración en vivo: https://jsfiddle.net/yt22fwc0/

1
niandrei 10 may. 2016 a las 11:50

Simplemente hazlo como un ancla href y ve a ese ancla.

<button onClick="document.location+='#scrolled';return false;">Scroll</button>
4
Joey 10 may. 2016 a las 11:47