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

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

ただいまの
回答率

90.99%

  • jQuery

    5831questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

左上のメニューをタッチしたら中にあるタイトルと同じ位置までスクロールするアニメーションを実行したい

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 108

Anfanger

score 5

左上にメニューを作って、特定の項目をクリックしたら、コンテンツのトップまでスクロールしていく内容を作りたいのですが、ボタンを押してもエラーが出てしまい、困っています。ご指摘いただきたいです。
また、簡潔に表示するために提案などがあれば勉強させていただきたいです。
お願いいたします。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<title>jQuery</title>
<link rel="stylesheet" href="../../common/css/reset.css">
<link rel="stylesheet" href="../../common/css/base.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="wrapper">
  <div class="menu">
    <span class="menu__btn" data-scroll-place-type="home">Home</span>
    <span class="menu__btn" data-scroll-place-type="news">News</span>
    <span class="menu__btn" data-scroll-place-type="about">About</span>
  </div>
  <div class="contents">
    <p class="title" data-scroll-place-type="home">Home</p>
    <p class="body">Lorem </p>
    <p class="title" data-scroll-place-type="news">News</p>
    <p class="body">Lorem </p>
    <p class="title" data-scroll-place-type="about">About</p>
    <p class="body">Lorem </p>
  </div>
  <span class="scrollTopBtn" style="display: none;"></span>
</div>
<script src="../../common/js/jquery.js"></script>
<script>
  $(function() {
    var Topicon = 100;
<エラー>
    $('.menu__btn').on('click', function() {
    var type = $(this).data('place');
    var pol = $('title').eq(type).offset().top;
    $('html,body').animate({ scrollTop:'pol'});
    });
</エラー>

    $(window).on('scroll', function() {
      if($(window).scrollTop() >= Topicon) {
        $('.scrollTopBtn').fadeIn();
      } else {
      if($(window).scrollTop() < Topicon) {
        $('.scrollTopBtn').fadeOut();
      }
      }
    });

    $('.scrollTopBtn').on('click', function() {
        $('html, body').animate({scrollTop:0});
    });
  });
</script>
</body>
</html>
</script>
.clearfix:after {
  display: block;
  clear: both;
  content: '';
}
.wrapper {
  padding: 20px;
}
.menu {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 0;
}
.menu__btn {
  display: inline-block;
  padding: 10px 20px;
  font-size: 14px;
  background-color: #fff;
  cursor: pointer;
}
.menu__btn + .menu__btn {
  border-left: 1px #eee solid;
}
.contents {
  padding: 10px;
  margin: 100px auto;
  width: 400px;
  background-color: #fff;
}
.title {
  padding-top: 10px;
  margin: 0 0 20px;
  font-size: 20px;
}
.scrollTopBtn {
  position: fixed;
  bottom: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background-color: #fff;
  cursor: pointer;
}
.scrollTopBtn:before {
  position: fixed;
  bottom: 18px;
  right: 22px;
  width: 15px;
  height: 15px;
  border-top: 4px #999 solid;
  border-left: 4px #999 solid;
  transform: rotate(45deg);
  cursor: pointer;
  content: '';
}


```

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正の依頼

  • kei344

    2017/10/27 18:27 編集

    エラー文も質問に追記して置いてください。「どこでエラーが起こった」でなくエラー文自体を提示してください。

    キャンセル

まだ回答がついていません

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

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

関連した質問

  • 解決済

    ページ上部にスクロール設定について

    ページの右下に、クリックするとページ上部に行く設定をしたのですが、スクロール位置を1000以下にすると非表示に設定をhead内に記述したのですが実行できません。 ご教授頂けますと嬉

  • 受付中

    レスポンシブルデザインについて

    ページ上部のメニューをクリックしたらスマホのサイトのようなメニューバーを表示させたいのですがどうすればよろしいでしょうか。 ちなみにこちらのサイトを参考にしました https://

  • 解決済

    レスポンシブデザインについて

    この画像の上部の油そば池袋とありますが幅を小さくしていくと 赤枠の箇所に油そば池袋と入れたいのですがどうすればよろしいでしょうか <!DOCTYPE html> <html

  • 解決済

    iScroll.jsを使用してコンテンツを横スクロールにする

    現在横スクロールを実現するためにiScroll.jsというライブラリを使用しています。 そこで横スクロールさせたいコンテンツの始点を右端にしスクロールすると左にコンテンツが移動する

  • 解決済

    menuバーの中央配置について

    pc-menu内の<h1 class="aburasoba">油そば池袋</h1>を削除した際にliでかこった<li>menu</li>を中央配置にしたいのですがfloat: ce

  • 解決済

    メニューバーで現在のページをハイライトさせたい

    ページ内移動で現在いる場所のメニューをハイライトさせたいのですが 今のjavascriptがフルパスでの設定方法になっています。 これをIDで指定したいです。 ご教授願いいたします

  • 解決済

    javascript classがうまく付与されない

    javascript初心者なためどうしても解決できず質問しました。 パララックス サイトを構築しておりました。 参考url http://histerian.net/pallax/

  • 解決済

    スクロールスパイをコーディングしたがスクロールされない

    前提・実現したいこと Bootstrap ScrollSpy.js とsmooth-scroll.jsの組み合わせでナビバーのメニューをクリックすると目的の場所までスクロールさせた

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

  • jQuery

    5831questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • トップ
  • jQueryに関する質問
  • 左上のメニューをタッチしたら中にあるタイトルと同じ位置までスクロールするアニメーションを実行したい