javascript - DOJO 中的 scrollTo()

Question

我正在使用以下代码滚动到文档的特定绝对位置。没有动画的文档滚动。

window.scrollTo(0, 500);

我想知道是否可以使用 DOJO 滚动到特定的绝对位置，类似于 window.scrollTo() 但具有动画效果。

能否请您提供一个代码示例？

Answer 1

您可以使用 dojox/fx/scroll 中的 smoothScroll

function scrollToFirst() {
  require(['dojox/fx/scroll'], function(scroll) {
    scroll({
        node: document.querySelector('#foo :first-child'),
        win: window
    }).play();
  });
}

function scrollToLast() {
  require(['dojox/fx/scroll'], function(scroll) {
    scroll({
        node: document.querySelector('#foo :last-child'),
        win: window
    }).play();
  });
}

function scrollToPosition() {
  require(['dojox/fx/scroll'], function(scroll) {
    scroll({
        target: {y: 300, x: 0},
        win: window
    }).play();
  });
}

function scrollToTop() {
  require(['dojox/fx/scroll', 'dojo/dom-geometry'], function(scroll, domGeom) {
    var pos  = domGeom.position(window.document.body);
    if(pos.y > 0) { pos.y = 0 }
    scroll({
        target: {y: pos.y * 2, x: 0},
        win: window
    }).play();
  });
}

function scrollToRandom() {
  require(['dojox/fx/scroll', 'dojo/dom-geometry'], function(scroll, domGeom) {
    var pos  = domGeom.position(window.document.body);
    var randomPosition = Math.round(Math.random() * pos.h);

    document.getElementById('pos').innerHTML = randomPosition;
    if(randomPosition === pos.y) { return; }
    if(randomPosition < pos.y) { 
      if(pos.y > 0) { pos.y = 0 }
      randomPosition = (pos.y * 2) + randomPosition 
    }
    if(randomPosition > pos.y) { randomPosition = pos.y + randomPosition }
    
    scroll({
        target: {y: randomPosition, x: 0},
        win: window
    }).play();
  });
}

.buttons {
  position: fixed
}

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css"> 
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<div class="buttons">
    <button onclick="scrollToFirst();">Scroll to first</button>
    <button onclick="scrollToPosition();">Scroll to a position in middle</button>
  <button onclick="scrollToTop();">Scroll to position Top</button>
    <button onclick="scrollToLast();">Scroll to last</button>
  <button onclick="scrollToRandom();">Scroll to random</button>
  <span>random position:</span><span id="pos"></span>
</div>
<div id="foo">
  <p>content first</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content last</p>
  
</div>

编辑: 通过对 dojox/fx/scroll 进行逆向工程，我找到了一种在 window 的任何位置正确滚动的方法。请参阅 scrollToRandom() 和 scrollToTop()