質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.36%

JavaScriptでトップページボタンをしたい

受付中

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,030

score 18

JavaScriptでトップページボタンにワンタップでスルスル〜とトップへ戻る機能をつけたい

webサイトにトップページボタンを作り、JavaScriptの機能をつけたいです。

発生している問題・エラーメッセージ

トップページボタンはすでにできていますが、JavaScriptの機能が反映されません。

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Home|Risa_designer</title>
<link href="https://fonts.googleapis.com/css?family=Bitter:400,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.4/css/all.css">
<div id="page_top"><a href="#"></a></div>
</head>
<body id="portfolio">

 <!-- header始まり -->
  <header>
    <div class="logo">
      <a href="index.html"><img src="images/logo.png" alt="RisaDesign"></a>
    </div>
    <nav>
      <ul class="global-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </nav>
  </header>
  <!-- header終わり -->

  <!-- wrap始まり -->
  <div id="wrap" class="clearfix">
    <div class="content">
      <div class="main">
        <h1>Home</h1>
        <p>ご依頼についてと実績を掲載しています。</p>
        <section>
          <h2><a href="photograph.html"><img src="images/flower.jpg" alt="flower"></a></h2>
          <p>Webデザインに関する説明となっており、ご依頼する際にご確認して頂きたい内容となっております。<br>「サービス内容」「制作料金」「ご契約の流れ」<a href="photograph.html">詳しくみる≫</a></p>
        </section>
        <section>
          <h2><a href="video.html"><img src="images/pc.jpg" alt="pc"></a></h2>
          <p>制作実績の紹介となっております。Webデザイン関連と紙デザインに分けて掲載しております。「Webデザイン関連」「名刺デザイン」<a href="video.html">詳しくみる≫</a></p>
        </section>
      </div>
      <aside class="sidebar">
        <section>
          <h2>ご依頼について</h2>
          <ul>
            <li><a href="photograph.html#サービス内容">サービス内容</a></li>
            <li><a href="photograph.html#制作料金">制作料金</a></li>
            <li><a href="photograph.html#ご契約の流れ">ご契約の流れ</a></li>
          </ul>
        </section>
        <section>
          <h2>制作実績</h2>
          <ul>
            <li><a href="video.html#Webデザイン関連">Webデザイン関連</a></li>
            <li><a href="video.html#名刺デザイン">名刺デザイン</a></li>
          </ul>
        </section>
      </aside>
    </div>
  </div>
  <!-- wrap終わり -->

  <!-- footer始まり -->
  <!--pagetop-btn-->
  <a href="#" class="btn-pageTop"><span class="fa fa-chevron-up"></span></a>
  <!--/pagetop-btn-->

  <footer>
    <small>&copy;2019 Risa_Design All rights reserved.</small>
    <a href="https://www.instagram.com/rsymuc/" target="_blank" ><img src="images/insta2.png" class="insta2" alt="insta2"></a>
  </footer>
  <!-- footer終わり -->

  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="http://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js"></script>
  <script src="../js/script.js"></script>
</body>
</html>
@charset "UTF-8";

body {
  margin: 0;
  padding: 0;
  background-color: #cccccc;
  color: #333333;
  font-size: 15px;
  line-height: 2;
}

p, h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
}

img {
  vertical-align: bottom;
}

ul {
  margin: 0;
  padding: 0;
}

a {
  color: #3583aa;
  text-decoration: none;
}

a:visited {
  color: #788d98;
}

a:hover {
  text-decoration: underline;
}

header {
  width: 960px;
  height: 100px;
  margin: 0 auto;
}

.logo {
  float: left;
  margin-top: 50px;
}

.global-nav {
  float: right;
  margin-top: 60px;
}

.global-nav li {
  float: left;
  margin: 0 20px;
  font-size: 20px;
  list-style: none;
  font-family: 'Bitter', serif;
}

.global-nav li a {
  color: #ffffff;
}

.global-nav li a:hover {
  border-bottom: 2px solid #ffffff;
  padding-bottom: 3PX;
  text-decoration: none;
}

#wrap {
  clear: both;
  background-color: #ffffff;
  margin-top: 220px;
  padding: 35px 0;
}

.content {
  width: 960px;
  margin: 0 auto;
}

footer {
  text-align: center;
  color: #ffffff;
  padding: 20px 0;
  background-color:#e5b9c5;
}

footer small {
  font-size: 12px;
}

.insta2 {
  width: 25px;
  height: 25px;
  padding: 0 10px 0 10px;
}



#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 50px;
  background: #3f98ef;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -5px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}

#index footer {
  width: 960px;
  margin: 150px auto 0 auto;
  text-align: left;
  background-color: transparent;
}

#index {
  background-image: url("../images/bg-index.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
}

#about {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#about .insta {
  padding-left: 450px;
}

#contact .insta {
  padding-left: 450px;
}

.main-center {
  width: 940px;
  margin: 0 auto;
}

h1 {
  font-family: 'Bitter', serif;
  font-size: 36px;
  border-bottom: 1px solid #cccccc;
}

h2 {
  font-family: 'Bitter', serif;
  font-size: 24px;
}

.icon:before {
  content: "";
  padding-right: 10px;
  border-left: 7px solid #c57d86;
}

#about .profile-txt {
  width: 540px;
  float: left;
}

#about .profile-txt span {
  font-weight: bold;
}

#about .profile-image {
  float: right;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

section {
  margin-bottom: 35px;
}



#index #wrap {
  background-color: transparent;
  margin-top: 0;
  padding: 0;
}

#portfolio {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

.main {
  width: 700px;
  margin: 0 10px;
  float: left;
}

.sidebar {
  width: 200px;
  margin: 0 10px 0 30px;
  float: right;
  font-family: 'Bitter', serif;
}

a img:hover {
  opacity: 0.8;
}

.sidebar h2 {
  margin-bottom: 10px;
}

.sidebar ul {
  font-size: 16px;
  margin-left: 20px;
}

.sidebar ul a {
  color: #333333;
}

#photograph {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#video .photograph-list li {
  float: left;
  list-style: none;
  margin: 0 20px 15px 0;
}

#video .photograph-list li:nth-child(3n){
  margin-right: 0;
}

#video {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#photograph .career th {
  width: 400px;
  background-color: #f0f0f0;
  padding: 12px 0;
  border: 1px solid #cccccc;

}

#photograph .career td {
  width: 400px;
  padding: 12px 0;
  border: 1px solid #cccccc;
  text-align: center;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

#contact {
  background-image: url("../images/header.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  background-size: 100% auto;
}

#contact .access table {
  float: left;
}

#contact .access th,
#contact .access td {
  text-align: left;
  vertical-align: top;
  line-height: 2.5;
}

#contact .access td {
  padding-left: 30px;
}

#contact .access iframe {
  width: 460px;
  float: right;
}

#contact .form {
  background-color: #eaeaea;
  padding: 30px 50px;
}

#contact .form dl dt {
  width:165px;
  padding: 10px 0;
  float: left;
  clear: both;
}

#contact .form dl dd {
  padding: 10px 0;
}

#contact .form .name {
  width: 240px;
  height: 30px;
}

#contact .form .email {
  width: 300px;
  height: 30px;
}

#contact .form .tel {
  width: 240px;
  height: 30px;
}

#contact .form .type {
  width: 180px;
  height: 30px;
}

#contact .form .message {
  width: 660px;
  height: 150px;
}

#contact .form button {
  background-color: #948F8F;
  color: #ffffff;
  font-size: 20px;
  width: 120px;
  display: block;
  text-align: center;
  line-height: 50px;
  border-radius: 5px;
  border: 3px solid #948F8F;
  margin-left: 165px;
}

#contact .form button:hover {
  background-color: #ffffff;
  color: #948F8F;
  cursor: pointer;
}

#contact .form .required:after {
  content: " * ";
  color: #ff0000;
}

#contact .form .attention {
  margin: 20px 0 0 165px;
}
/*-------------------------
ページトップボタン
--------------------------*/
$(".btn-pageTop").on("touchstart",function(){
  $(this).toggleClass("active");
  $(".header-nav").fadeToggle(500);
});

試したこと

スクールで習った公式は下記です。
これを自分で作ったhtmlに当てはめてコードをかきましたができませんでした。
この公式を必ず使いたいのですが可能でしょうか。
ご教授宜しくお願い致します。

$(".btn-trigger").on("touchstart",function(){
$(this).toggleClass("active");
$(".header-nav").fadeToggle(500);
});

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/08/05 09:08

    >トップページボタンを作りたいです。
    トップページボタンは既にできています。
    もう少し正確に「やりたいこと」「実現したいこと」「今できていないこと」を記載されたほうが良いと思います。(今回くらいの内容でしたら何となくエスパーできなくもないですが、何となくでもエスパーをさせることなく誰にでも伝わる表現を心がけたほうが良いです)

    キャンセル

  • risacuspin

    2019/08/05 14:58

    コメントありがとうございます。
    自分が分からないことを言葉にするのが難しく、これで他の人にも伝わると思ってしまいました。
    ご指摘されて他の人には伝わらないと気づきましたすみませんでした。
    文章を見直して修正します。

    キャンセル

  • m.ts10806

    2019/08/05 15:01

    見る人ほぼ100%が赤の他人なので、そのために質問テンプレートのような最低限必要な項目を入力するための機能があります。
    https://teratail.com/help/question-tips#questionTips3-8

    キャンセル

  • risacuspin

    2019/08/05 15:42

    送っていただきありがとうございます。
    テンプレートを使用し、修正いたしました。

    キャンセル

回答 2

+2

animateがコードに含まれていないです。

teratailで質問する前に「jquery トップ 戻る」などで
検索して調べてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/05 15:45

    質問する前にJavaScriptで検索しましたが分かりませんでしたので質問しました。

    キャンセル

  • 2019/08/05 19:16 編集

    「jquery トップ 戻る」で検索してわかりましたので問題は別のところにあると思います。

    解決策はもう一度スクールに行って対面形式で教わることです。
    ここではどのように説明を受けても「わからない」として不毛な説明を要求することになるでしょう。

    「jquery トップ 戻る」で検索すると

    【jQuery】「トップへ戻る」ボタン付き!するすると動くアンカーリンク
    https://qiita.com/kape/items/ecd6f12b8ff547453ed8

    が見つかりました。

    $("html, body").animate({
    scrollTop: 0
    }, 500, "swing");

    そこにある上記プログラムをブラウザ開発ツールのコンソールに貼り付けるとページのトップ(位置0)にスルスル〜と移動しました。
    「スルスル〜と移動」にしてもエスパーして回答しています(失礼ですが質問が不明確だと思います)が違っていたら忘れてください。

    キャンセル

+2

機能しているかどうかは下記のようにして調べましょう。

$(".btn-pageTop").on("touchstart",function(){
    console.log("click!!");
  $(this).toggleClass("active");
  $(".header-nav").fadeToggle(500);
});    

ブラウザ開発ツールのコンソールを確認して「click!!」と出力されていれば.btn-pageToptouchstartイベントは動いていると言えます。

動かないということは何かしら邪魔があるのかもしれません。
もう少しコードを削って必要最小限のコードで試してみたほうが良いかもしれません

動いているなら「必要な処理が足りていない」ということになります。
つまりスルスル〜とトップへ戻る機能が未実装であるということになります。
自身が提示したJavaScriptの機能を良く見てみると分かると思います。
下記2つに「スルスル~とトップへ戻る機能」があるだろうか?
toggleClass()
fadeToggle()

こういった機能はありふれているものですので、ネット上で検索しても良いですし、
teratail内の過去質問を有効活用することも覚えると、自己解決で済むことも多くなると思います。

そうするとより具体的なキーワードが出てくることもあります。
「スルスル~とトップへ戻る」を言い換えるとどうなるか?
もう少しプログラムっぽい表現はないか?
と考えるのも必要ですし、そのキーワードを探すための検索というのもしていってください。

他、気になったところを列挙

  • なぜ3回も読み込ませている??https://use.fontawesome.com/releases/v5.6.4/css/all.css
  • 自身が作成したCSSは↑のようなフレームワークなどよりも後に読み込ませたほうが良い(読み込み順は一番最後が好ましい)
  • 別のバージョンのjQueryが読み込まれているがバッティングするのではないか。
  • 今の画面にmixitupは必要?
  • <head></head>の中に要素を置くのは構文上NG

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る