CODEWITHSUNDEEP
javascriptdojo
GibboK
GibboK

Reputation: 73918

scrollTo() in DOJO

I am using the following code to scroll to a specific absolute position of the document. Document scrolls with no animation.

window.scrollTo(0, 500);

I would like to know if is it possible to use DOJO to scroll to a specific absolute position similarly to window.scrollTo() but with an animation effect.

Could you please provide me a sample of code?

Upvotes: 1

Views: 2463

Answers (2)

ben
ben

Reputation: 3568

You can use smoothScroll from dojox/fx/scroll 

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>

EDIT: By reverse engineering dojox/fx/scroll I found a way to scroll properly at any position of window. See scrollToRandom() and scrollToTop()

Upvotes: 3

Philipp Br
Philipp Br

Reputation: 113

You can use 

dojox.fx.smoothScroll

See this example:

DOJO smooth scroll

EDIT:

For absolute position use:

var target = this.isHorizontal ? {x: left, y: 0} : { x:0, y:top};
        dojox.fx.smoothScroll({
            target: target,
            win: this.thumbScroller,
            duration:300,
            easing:dojo.fx.easing.easeOut,
            onEnd: dojo.hitch(this, "_checkLoad", img, index)
        }).play(10);

Upvotes: 1

Related Questions