株式会社HUBFACTORY - 新たなつながりを作るサービス・アプリ・WEB制作会社 -
CREATE A NEW HUB
IN THE WEB SEARVICE...
PICK UP

web

WEBサイト制作講座 | 動きのあるページ制作2「TOPへ戻る・アンカーのスクロール」

2017.11.20

CATEGORY - web

前回に続いて、今回もスクロールイベント系を2つやっていきたいと思います。

スキー

※そろそろ、スキーの季節ですねえ(´-`).。oO(

「TOPへ戻る・アンカーのスクロール」で作成する完成版のファイルはこちらからダウンロードできます↓↓

TOPへ戻る・アンカーのスクロール 完成版ファイル

1. TOPへ戻るボタン

いろんなサイトで見たことあると思いますが、右下あたりに表示されて、クリックすると、ページの最初まで戻ってくれるあれです。

こんなやつ。w

TOPへ戻るアニメーション

※これだとよくわかりませんが、右下のボタンをクリックすると、ページ上部まで戻る挙動になってます。

 

では、HTMLから。

フッターの下にこれを追加してください。

<!-- ページTOPへ戻るボタン -->
<div class="to-top-btn" id="js-to-top">
  <img src="assets/images/common/btn_to_top.png" alt="TOPへ" width="50">
</div>

あとで、css で position:fixed で画面に対して表示する場所を指定するので、フッターの下で大丈夫です^^

 

次に、CSS。

/* ページTOPへボタン */
.to-top-btn {
  position: fixed;
  bottom: 30px;
  right: 30px;
  cursor: pointer;
}

.to-top-btn img {
  transition: all 0.2s ease-in-out;
}

.to-top-btn img:hover {
  opacity: 0.8;
}

transition だけやっておきましょうか^^;;;

CSSアニメーションの1つで、これを設定しておくと、その要素に何か変化が起こったときに指定したアニメーションをしてくれます。

書き方は、まあ、調べてもらうとして。。。。。

今回ですと、その画像をマウスオーバーすると、opacity(透明度)を 0.8 に下げる処理をいれてます。

なので、この画像をマウスオーバーすると、0.2秒かけて、透明度を0.8に徐々に下げる処理になってます。

CSS の transition はこんな感じで使います^^

 

はい、では、JavaScript。

今回も、jQuery でやっていきます。

実装においての考え方はこんな感じですかね。

1. TOPへ戻るボタンのDOMを取得しておく。
2. クリックしたら、ページの一番上まで、スルスルと戻る

コードです。

// ページTOPへボタン
var $toTopBtn = $('#js-to-top');

まず、戻るボタンをjQueryオブジェクトとして取得します。

//TOPまでスクロール
$toTopBtn.on('click', function(){
  $('html,body').animate({
    scrollTop: 0
  }, 500);
});

で、クリックしたら、jQuery animateメソッドを使って、ページの一番上まで戻ります。

簡単ですね^^

2点だけ。

ページの上部まで戻りたい場合は、$(‘html,body’) の scrollTop を 0 にしてます。
こーゆーもんだと思っちゃってください笑

animate メソッドは、アニメーションを行う時間を指定することができます。
今回は、500ミリ秒かけて、ページの一番上までスクロールするって意味です。

これだけでもいいんですが、初期表示の時点でも、TOPへ戻るボタンが表示されているので、そのときに押しても、なにもおきませんw
なので、ページをスクロールして、ページの途中くらいになったら、TOPへ戻るボタンが表示されるようにしたいと思います。

$toTopBtn.hide();

最初に、ボタンを非表示にしちゃいます。
jQuery の hideメソッドを使います。

// スクロールイベント
$window.on('scroll', function(){
  var $this = $(this);
  
  // 前回の部分:省略

  // ページTOPへボタンの出現
  if ($this.scrollTop() > 500) {
    $toTopBtn.fadeIn();
  } else {
    $toTopBtn.fadeOut();
  }
});

スクロールしたら表示/非表示をきりかえたいので、前回作ったスクロールイベントの中に書いていきます。

fadeIn、fadeOutメソッドを使用しています。
読んで字のごとく、フェードイン、フェードアウトさせますw

簡単っすかね。^^;;;

一点、重要なこと。

var $this = $(this);

$(this)を変数に入れちゃってます。

1つのfunctionの中で、$(this)をもし、何回も使用するようなことがあれば、このように、最初に変数に入れちゃいます。
今回ですと、 ちょっと省略しちゃいましたが、前回の部分で、使った、$(this)も 変数に入れた $this に置き換えちゃいます。

このように、何回も使用するようなオブジェクトは、一度、変数に入れちゃったほうが、ページのパフォーマンスがよくなるので、覚えておいてください^^

2. アンカーのスクロール

今、メニューのアンカーをクリックしたときに、ばん!って感じで移動してるので、これもにゅるにゅるスクロールして移動させるようにしたいと思います。

アンカーのスクロールアニメーション

HTMLとCSSは特に変更点ないので、JavaScript(今後、JSって言っちゃいますねw)部分だけ。

// #で始まるアンカーをクリックした場合に処理
$('a[href^="#"]').on('click', function(e) {
  // デフォルトのaタグの挙動を無視する
  e.preventDefault();
  // アンカーの値取得
  var targetAnchor= $(this).attr('href');
  // 移動先を取得
  var targetContent = $(targetAnchor == "#" || targetAnchor == "" ? 'html' : targetAnchor);
  // 移動先を数値で取得
  var targetPosition = targetContent.offset().top - 120;
  // スムーススクロール
  $('html,body').animate({
    scrollTop: targetPosition
  }, 300);
});

なんかごちゃごちゃと複雑っすねw w w

一個ずつみていきましょう。

まず、

$('a[href^="#"]')

の書き方。

jQueryオブジェクトで、属性まで指定することがことができます。

属性だけなら、$(‘a[href]’) でよいのですが、今回は、アンカーが”#”で始まるものを取得したいので、こんな感じで書いてます。

ちなみに、「^=”#”」の部分は、正規表現を使っていて、”#”で始まるっていう意味です。
正規表現も興味ある方は調べてみてくださいw

// デフォルトのaタグの挙動を無視する

e.preventDefault();

次に、これ。

function(e)  ←  function の引数に “e”を指定してます。
これは、イベント自体を表しています。今回ですと、アンカーのクリックイベントのことですね。

で、それを、preventDefault() してます。

これは、アンカーのクリックイベント自体が持つイベント(#ほにゃらら で指定した部分に移動する)をキャンセルさせるメソッドです。
これを指定しないと、変な動きになることがあるので、指定してあげます^^

// アンカーの値取得
var targetAnchor= $(this).attr('href');

クリックしたアンカーのhref属性の値を取得してます。jQuery で 属性の値を取得するときは、attr を使います。

// 移動先を取得
var targetContent = $(targetAnchor == "#" || targetAnchor == "" ? 'html' : targetAnchor);

異動先のDOMをjQueryオブジェクトで取得してます。
$(targetAnchor) だけでもよいのですが、アンカーのhrefの値が空白だったり、”#”だけのときも考慮して、こういう書き方にしてます。

アンカーのhrefの値が空白、もしくは、”#”だけ -> $(‘html) を異動先に。

それ以外のとき -> $(targetAnchor) を異動先にするって意味です。

ちなみに、、、、かなり、これ、省略させて書いてますが、省略させないと、

var targetContent;
if (targetAnchor == "#" || targetAnchor == "") {
  targetContent = $('html');
} else {
  targetContent = $(targetAnchor);
};

こんな感じになります^^

// 移動先を数値で取得
var targetPosition = targetContent.offset().top - 120;

移動先のDOMの一番上の座標を取得するのが、offset().top になります。

これだけでもいいのですが、今回、にゅるっとメニュー分を考慮したいので、一番上の座標より120px上を取得させてます。

あとは、animateメソッドだけなので、大丈夫ですかね。

スクロール系、ばっちりですかね!w

今回のポイント

  1. CSSの transition は、何か変化が起こったときに指定したアニメーションをしてくれます!
  2. JSで、何回も使用するようなオブジェクトは、一度、変数に入れちゃったほうが、ページのパフォーマンスがよくなる!
  3. preventDefault は、デフォルトのイベントをキャンセルする!

 

株式会社HUBFACTORY(ハブファクトリー) - 新たなつながりを作るサービス・アプリ・WEB制作会社 -

© 2014-2015 HUBFACTORY.INC

PAGE TOP