【初心者必見】Webサイトにスムーススクロールを作ってみよう！コピペOKでご紹介

ポートフォリオの作成にリッチな動きをつけるには？

Webサイトによくあるスクロールの動きを盛り込みたいな。

Web制作初心者でポートフォリを作るとき、様々な動きをつけたくなるものです。

そのいろいろの中でサイト画面の移動をスムーズにスクロールさせる方法をご紹介します。

サイトを見る方にも移動のストレスを感じさせなくよく取り扱われる実装です。

自身のポートフォリオに取り入れて好感度の高いサイトを制作しましょう。

この記事では実際のスムーススクロールの完成動画とコードを掲載します。

コピペで動きを確認した後、自分でも書いて見ることで理解が深まりますので参考になさってください。

この記事でできること

HTML・CSS・jQueryのコードの書き方がわかる
自分のポートフォリオに取り入れることができる

スムーススクロールを制作しよう
ポートフォリオにスムーススクロールを使ってみよう

スムーススクロールを制作しよう

上のような動きを作っていきます。

ダミーのWebサイトですので実装したいサイトにコードを書き込んで使用してください。

STEP1： HTMLでサイトの土台を作成する
STEP2： CSSでサイトの装飾をする
STEP3： jQueryで動きをつける

HTMLでサイトの土台を作成する

<!DOCTYPE html>
<html lang="ja"> 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>smooth scroll</title>

  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
  <link rel="stylesheet" href="css/style.css">
  
  
  
</head>
<body>
  <main class="top-container"> 
  <!--  ヘッダー -->
    <header class="page-header">
      <nav>
        <ul class="main-nav">
          <li><a href="#about">About</a></li>
          <li><a href="#service">Service</a></li>
          <li><a href="#works">Works</a></li>
          <li><a href="#contact">Contact</a></li> 
         </ul> 
      </nav> 
    </header>


  <!--  About  -->
  <section class="about-container" id="about">
    <h2 class="about-title">ABOUT</h2>
  </section> 


  <!--  SERVICE  -->
  <section class="service" id="service">
    <h2>SERVICE</h2> 
  </section>


  <!--  WORKS  -->
  <section class="works" id="works">
      <h2>WORKS</h2>      
  </section>


  <!--  CONTACT  -->
  <section class="contact" id="contact">
    <div class="contact-title">
      <h2>CONTACT</h2>
    </div>
  </section>

</main>


<!-- フッター-->
<footer>
  <div class="footer-wrapper">
    
  </div>
</footer>


<!--  トップへ戻る  スクロール-->
<div id="goto_top">
  <a href="#">Page<br>Top</a>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/main.js"></script>

</body>
</html>

HTMLの部分は任意に作成しています。

HTML

<ul class="main-nav">
    <li><a href="#about">About</a></li>
    <li><a href="#service">Service</a></li>
    <li><a href="#works">Works</a></li>
    <li><a href="#contact">Contact</a></li> 
</ul>

各タイトルのidにリンクさせるために#aboutなどを＃を設定します。

HTML

 <!--  About  -->
  <section class="about-container" id="about">
    <h2 class="about-title">ABOUT</h2>
  </section>

上のようにセクションのタイトルにidを設定しておきます。

これで土台は完成です。

トップへのスクロールボタンはリンクに”＃”とだけ設定するとトップへ戻ります。

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="js/main.js"></script>

bodyタグの上にjQueryのCDNを設置します。

CSSでサイトの装飾をつける

@charset "UTF-8";

html {
  font-size: 100%;  
}

a {
  text-decoration: none;
}

.page-header {
  max-width: 100%; 
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  height: 100%;  
}
nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 20px 0;
}
.main-nav {
  display: flex;
  font-size: 1rem;
  text-transform: uppercase;
  list-style: none;
}
.main-nav li {
  padding: 20px;
}
.main-nav li a {
  color: #333;
}
.main-nav li a:hover {
  color: #ddd;
}

.about-container {
  background-color: #ffeee5;
  height: 100vh;
}
.about-title {
  text-align: center;
  font-size: 2rem;
  color: #0096b5;
  padding-top: 50px;
  padding-bottom: 50px;
}


.service {
  background-color: #7ac5ff;
  height: 100vh;
}
.service h2 {
  font-size: 2rem;
  text-align: center;
  padding-top: 100px;
  padding-bottom: 80px;
  color: #0096b5;
  text-align: center;
}

.works {
  background: #ffeee5;
  height: 100vh;
}
.works h2 {
  font-size: 2rem;
  text-align: center;
  color: #0096b5;
  padding-top: 80px;
}


.contact {
  background-color: #fbffc3;
  height: 100vh;
}
.contact-title h2 {
  font-size: 2rem;
  text-align: center;
  color: #0096b5;
  padding-top: 80px;
  padding-bottom: 80px;
}


.footer-wrapper {
  background-color: #8ee0bf;
  height: 150px;
}


/*  トップへ戻る  スクロール  */
#goto_top {
  position: fixed;
  right: 5%;
  bottom: 5%;
  opacity: .6;
}
#goto_top a {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: #0096b5;
  display: block;
  padding-top: 8px;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}

CSSではHTMLで作った土台に装飾していきます。

基本のよくあるサイトの型ですので

今回は、ヘッダー・ナビゲーション・タイトル・色などは任意です。

基本のよくあるサイト型ですのでお好みでアレンジして作成してください。

jQueryで動きをつける


//スムーススクロール
$(function(){
  var width =  $(window).width();
  $('a[href*="#"]').click(function() {  //"#"で始まるリンクをクリックしたとき
  var speed = 800; // スクロールの速度
  var href= $(this).attr("href");  // "href"属性の取得
  var target = $(href == "#" || href == "" ? 'html' : href); //移動先の取得（hrefが#または””ならトップ$(html)
  var position = target.offset().top; //移動先のポジション指定
  $('body,html').animate({scrollTop:position}, speed, 'swing'); //animateでスムーススクロール
  return false;
  });
  });

jQueryではスムーススクロールの動きをつけていきます。

ナビゲーションのリンクを押すとそのタイトルのページにスクロールして移動します。

また、フッターにあるトップへ戻るボタンでトップにスクロールして戻る実装をします。

ポートフォリオにスムーススクロールを使ってみよう

実際のコードを用意してスムーススクロールの実装をご紹介してきました。

ページの移動が滑らかになることで可視性も良いのではないでしょうか。

スピードがあまり遅いとサイトによってはストレスに感じることがありますので注意してください。

ポートフォリオは自分の技術の集大成でもありますので、今回のスムーススクロールや他いろいろな実装を盛り込んでアピールできるものを作りましょう。