🐬

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

2021/05/15に公開

CSS

スムーススクロール

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