Edit in JSFiddle

$(function() {
  var speed = 300;
  $('#totop').on("click", function() {
    $("html, body").animate({
      scrollTop: 0
    }, speed, "swing");
    return false;
  });
})
<main>
  <p>右下のボタンを押すとページ一番上に戻ります!</p>
  ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
  <br> ↓
</main>
<div id="totop"></div>
#totop {
  display: block;
  position: fixed;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
  border-radius: 50% 50%;
  height: 100px;
  width: 100px;
  background-color: #FF8A00;
}

#totop:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -25px;
  margin-left: -25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 25px 43.3px 25px;
  border-color: transparent transparent #FFF transparent;
}

#totop:hover {
  opacity: .8;
}