🐬

【Web制作】jQueryによるスムーススクロール!

1 min read

スムーススクロール

Webページでよくみられるスムーススクロールを実装してみました。
今回はボタンを押して、画面のトップまで戻るようなものを作りました。

実装例

HTML,SCSS,JSで実装しています。

  • トップに戻るボタンを配置します。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/style.css" type="text/css">
  <title>スムーススクロール</title>
</head>
<body>
  <main>
    <h1>スムーススクロールのテスト</h1>
    <div id="contents">
      <ul>
        <li>アイウエオ</li>
        <li>アイウエオ</li>
	 ・
	 ・
	 ・
        <li>アイウエオ</li>
        <li>アイウエオ</li>
      </ul>
    </div>
    <button class="fixed_btn">ボタン</button>
  </main>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
  • ボタンを常に右下に配置しています。
style.scss
@charset "utf-8";

main {
    width: 50rem;
    margin: 0 auto;
}

.fixed_btn {
    position: fixed;
    bottom: 20px;
    right: 10px;
    padding: 6px 40px;
}
  • ボタンのクリックメソッドを定義します。
  • destinationは画面上からどの位置まで戻るかを指定します。
  • speedは戻る速度です。(単位ミリ秒)
  • $("html").offset().topは常に0です。
  • return false;で親要素への伝播をしないようにしています。
    • ここでは他要素に関係ないですが。
script.js
$(function(){
    $(".fixed_btn").click(function () {
        const destination = 0;
        const speed = 400;
        let position = $("html").offset().top + destination;
        $('body,html').animate({ scrollTop: position }, speed, "linear");
        return false;
    });
});

Discussion

ログインするとコメントできます