JavaScript Scroll/Back to Top example with jQuery

JavaScript Scroll/Back to Top example with jQuery

by polygonplanet

HTML

<div class="back-to-top">Back to Top</div>

<div class="container">
<h1>JavaScript - Goto Top button example</h1>
<div class="random-text">
<div class="desc">
  <strong>下にスクロールすると右下に[Back to Top]ボタンが現れます。クリックするとスクロールします。</strong>
</div>
（スクロール用ダミー文章「吾輩は猫である」）<br><br>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。<br>その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。<br>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。<br>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。<br>その後猫にもだいぶ逢ったがこんな片輪には一度も出会わした事がない。のみならず顔の真中があまりに突起している。そうしてその穴の中から時々ぷうぷうと煙を吹く。どうも咽せぽくて実に弱った。これが人間の飲む煙草というものである事はようやくこの頃知った。<br>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。<br>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。<br>ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始であろう。この時妙なものだと思った感じが今でも残っている。<br>第一毛をもって装飾されべきはずの顔がつるつるしてまるで薬缶だ。</div>
</div>

CSS

.back-to-top {
  display: none;
  position: fixed;
  /*bottom: 10px;*/
  bottom: 50px; /* Fixed for jsfiddle result */
  right: 10px;
  width: 100px;
  height: 40px;
  background: rgba(255, 64, 64, 0.7);
  color: rgba(255, 255, 255, 0.9);
  line-height: 3;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  font-family: verdana, sans-serif;
  cursor: pointer;
  z-index: 9999;
}

.back-to-top:hover {
  background: rgba(255, 16, 16, 0.8);
  color: rgba(255, 255, 64, 0.8);
}

* {
  font-family: verdana, sans-serif;
}

html, body {
  margin: 0;
  padding: 0;
  background: #fff;
  overflow-x: hidden;
}

.container {
  margin: 0 auto;
  margin-top: 1em;
  margin-bottom: 1em;
  width: 400px;
}

h1 {
  margin: 5px;
  font-size: 17px;
  font-weight: bold;
}

.desc {
  margin: 1em;
}

.random-text {
  margin: 10px;
  line-height: 1.75;
}

JavaScript

// Scroll/Back to Top button example - jQuery

var backToTop = $('.back-to-top');

(function() {
  backToTop.hide().on('click', function() {
    $('html,body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });

  $(window).on('scroll', function() {
    if ($(this).scrollTop() < 10) {
      backToTop.hide();
    } else {
      backToTop.show();
    }
  });

})();










































var Game = function(self, stage) {
  this.self = self;
  this.stage = $(stage);
};

Game.prototype = {
  mx: 0,
  my: 0,
  scope: 50,
  speed: 22,
  interval: 13,
  starting: false,
  hovering: false,
  effecting: false,
  stageOffset: null,
  binded: false,
  score: null,
  startTime: 0,
  exposed: false,
  startWithHover: false,
  moved: false,
  movedCourses: null,

  start: function() {
    var that = this;
    this.starting = true;
    this.movedCourses = {};
    this.stageOffset = this.stage.offset();

    if (!this.binded) {
      this.onMouseMove = this.onMouseMove.bind(this);

      this.self.hide = function() {
        var hide_ = that.self.hide;
        return function() {
          that.onHide();
          return hide_.apply(that.self, arguments);
        };
      }();

      this.self.show = function() {
        var show_ = that.self.show;
        return function() {
          that.onShow();
          return show_.apply(that.self, arguments);
        };
      }();

      this.self.on('click', function() {
        that.score = that.getScore();

        $(this)
          .show()
          .text('CLEAR!')
          .fadeOut('slow')
          .promise().then(function() {
            that.stage.css({
              textAlign: 'center'
            }).text('').append(
              $('<h1>').css({
                marginTop: Math.floor($(window).height() * 0.4)
              }).text('GAME OVER')
            ).append(
              $('<p>').text('score: ' + that.score)
            ).append(
              $('<div>').css({
                margin:...