Smooth scroll com Dojo Toolkit

index.html

<span class="p1">Paragraph 1</span>
<span class="p2">Paragraph 2</span>
<span class="p3">Paragraph 3</span>
<span class="p4">Paragraph 4</span>
<span class="p5">Paragraph 5</span>
<div id="p1" class="ltext">
    <div class="header">Paragraph 1</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pretium in fringilla nec, interdum quis turpis. Donec urna metus, pretium feugiat luctus vitae, ullamcorper nec arcu. Integer dapibus sollicitudin convallis. Integer non tortor sit amet ante adipiscing pulvinar. Curabitur nec nulla non sem convallis lobortis quis quis urna. Quisque sed augue eu nisl commodo faucibus. Pellentesque egestas dui sed nisi ornare egestas. Morbi tempus molestie viverra. Vivamus aliquet urna et sem accumsan sit amet sagittis erat rutrum. Aliquam erat volutpat. Nullam semper mi at augue luctus aliquet. Morbi felis risus, mattis non vulputate vel, pellentesque et mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum iaculis nisl vel tristique. Nullam scelerisque arcu interdum felis venenatis faucibus.
</div>
<span class="p1">Paragraph 1</span>
<span class="p2">Paragraph 2</span>
<span class="p3">Paragraph 3</span>
<span class="p4">Paragraph 4</span>
<span class="p5">Paragraph 5</span>
<div id="p2" class="ltext">
    <div class="header">Paragraph 2</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pretium in fringilla nec, interdum quis turpis. Donec urna metus, pretium feugiat luctus vitae, ullamcorper nec arcu. Integer dapibus sollicitudin convallis. Integer non tortor sit amet ante adipiscing pulvinar. Curabitur nec nulla non sem convallis lobortis quis quis urna. Quisque sed augue eu nisl commodo faucibus. Pellentesque egestas dui sed nisi ornare egestas. Morbi tempus molestie viverra. Vivamus aliquet urna et sem accumsan sit amet sagittis erat rutrum. Aliquam erat volutpat. Nullam semper mi at augue luctus aliquet. Morbi felis risus, mattis non vulputate vel, pellentesque et mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum iaculis nisl vel tristique. Nullam scelerisque arcu interdum felis venenatis faucibus.
</div>
<span class="p1">Paragraph 1</span>
<span class="p2">Paragraph 2</span>
<span class="p3">Paragraph 3</span>
<span class="p4">Paragraph 4</span>
<span class="p5">Paragraph 5</span>
<div id="p3" class="ltext">
    <div class="header">Paragraph 3</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pretium in fringilla nec, interdum quis turpis. Donec urna metus, pretium feugiat luctus vitae, ullamcorper nec arcu. Integer dapibus sollicitudin convallis. Integer non tortor sit amet ante adipiscing pulvinar. Curabitur nec nulla non sem convallis lobortis quis quis urna. Quisque sed augue eu nisl commodo faucibus. Pellentesque egestas dui sed nisi ornare egestas. Morbi tempus molestie viverra. Vivamus aliquet urna et sem accumsan sit amet sagittis erat rutrum. Aliquam erat volutpat. Nullam semper mi at augue luctus aliquet. Morbi felis risus, mattis non vulputate vel, pellentesque et mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum iaculis nisl vel tristique. Nullam scelerisque arcu interdum felis venenatis faucibus.
</div>
<span class="p1">Paragraph 1</span>
<span class="p2">Paragraph 2</span>
<span class="p3">Paragraph 3</span>
<span class="p4">Paragraph 4</span>
<span class="p5">Paragraph 5</span>
<div id="p4" class="ltext">
    <div class="header">Paragraph 4</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pretium in fringilla nec, interdum quis turpis. Donec urna metus, pretium feugiat luctus vitae, ullamcorper nec arcu. Integer dapibus sollicitudin convallis. Integer non tortor sit amet ante adipiscing pulvinar. Curabitur nec nulla non sem convallis lobortis quis quis urna. Quisque sed augue eu nisl commodo faucibus. Pellentesque egestas dui sed nisi ornare egestas. Morbi tempus molestie viverra. Vivamus aliquet urna et sem accumsan sit amet sagittis erat rutrum. Aliquam erat volutpat. Nullam semper mi at augue luctus aliquet. Morbi felis risus, mattis non vulputate vel, pellentesque et mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum iaculis nisl vel tristique. Nullam scelerisque arcu interdum felis venenatis faucibus.
</div>
<span class="p1">Paragraph 1</span>
<span class="p2">Paragraph 2</span>
<span class="p3">Paragraph 3</span>
<span class="p4">Paragraph 4</span>
<span class="p5">Paragraph 5</span>
<div id="p5" class="ltext">
    <div class="header">Paragraph 5</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris urna lorem, pretium in fringilla nec, interdum quis turpis. Donec urna metus, pretium feugiat luctus vitae, ullamcorper nec arcu. Integer dapibus sollicitudin convallis. Integer non tortor sit amet ante adipiscing pulvinar. Curabitur nec nulla non sem convallis lobortis quis quis urna. Quisque sed augue eu nisl commodo faucibus. Pellentesque egestas dui sed nisi ornare egestas. Morbi tempus molestie viverra. Vivamus aliquet urna et sem accumsan sit amet sagittis erat rutrum. Aliquam erat volutpat. Nullam semper mi at augue luctus aliquet. Morbi felis risus, mattis non vulputate vel, pellentesque et mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam bibendum iaculis nisl vel tristique. Nullam scelerisque arcu interdum felis venenatis faucibus.
</div>

script.js

require([
  'dojo/fx/easing',
  'dojox/fx/scroll',
  'dojo/query',
  'dojo/dom'
], function(
  easing,
  smoothScroll,
  query,
  dom
) {

  query('.p1, .p2, .p3, .p4, .p5').on('click', function(){
    smoothScroll({
      node: dom.byId(this.className),
      win: window,
      duration: 800,
      easing: easing.backOut
    }).play();
  });

});

style.css

html {
  font-size: 12px;
}

.ltext {
  border: 1px solid #CCC;
  margin: 8px;
  padding: 2px;
}

.p1,
.p2,
.p3,
.p4,
.p5 {
  cursor: pointer;
  margin: 3px;
  padding: 2px;
  border: 1px solid #CCC;
  background-color: #B1DDFA;
}

.header {
  font-weight: bold;
  text-align: center;
}