Scroll to top or bottom with jquery

by quantum_leap123

HTML

<button onClick="scrollToBottom()">Scroll to Bottom</button>
<button onClick="scrollSmoothToBottom()">Scroll <b>Smooth</b> to Bottom</button>
<hr />
<span>Top of Body</span>

<!-- body content -->
<div id="div">
  Body Content
</div>

<span>Bottom of Body</span>
<hr />
<button onClick="scrollToTop()">Scroll to Top</button>
<button onClick="scrollSmoothToTop()">Scroll <b>Smooth</b> to Top</button>

CSS

body {
  overflow-x: hidden;
  overflow-y: visible;
}
#div {
  width: 300px;
  height: 1000px;
  background-color: orange;
}

span {
  background-color: blue;
}

JavaScript

scrollingElement = (document.scrollingElement || document.body)
function scrollToBottom () {
   scrollingElement.scrollTop = scrollingElement.scrollHeight;
}

function scrollToTop (id) {
   scrollingElement.scrollTop = 0;
}

//Require jQuery
function scrollSmoothToBottom (id) {
   $(scrollingElement).animate({
      scrollTop: document.body.scrollHeight
   }, 500);
}

//Require jQuery
function scrollSmoothToTop (id) {
   $(scrollingElement).animate({
      scrollTop: 0
   }, 500);
}