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

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

ただいまの
回答率

90.50%

  • JavaScript

    16431questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6709questions

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

  • HTML5

    4018questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JS 今日の日付を取得してそのIDの要素までページ内リンクでスクロールする方法

解決済

回答 2

投稿 編集

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

wcourage

score 1

前提・実現したいこと

HTML Javascriptでページ内リンクをクリックした際に、その日の日付を取得して
対応するIDの要素までスクロールするスクリプトを組んでいます。

<script>
      var today = function(){
        var now = new Date();
        var month = now.getMonth();
        var date = now.getDate();
        var today = '#' + (month + 1) + date;
        var link = document.getElementById('btn');
        link.href = "/" + today;
          return false;
   };
    </script>

<section class="main">
    <a id="btn" onclick="today()" href="">ボタン</a>

<p id="1215"> 
12月15日
</p>
<p id="1216"> 
12月16日
</p>
以下略
</section>


ここまではなんとか問題なく動作するのですが、
問題はヘッダーをposition:fixedで上部に固定しているため、
ヘッダーの高さ分だけ飛んだリンク先の位置をずらしたいと思い、
ネットで見つけた以下のJqueryをコピペで使っていたのが、
動作しなくなりました。

<script>
    $(function(){
    $('a[href^=#]').click(function() {
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var headerHeight = 65; //固定ヘッダーの高さ
        var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
        $('body,html').animate({scrollTop:position}, 550, 'swing');
        return false;
    });
});
    </script>

色々といじって見たりしたのですが、どうしてもきちんとスクロールしてくれません。
何か根本的な間違いをしているのかもしれませんが、Javascriptの知識もほとんどないので、
どこがおかしいのかわかりません。
できればこの2つのスクリプトをきちんと動作させて、さらに一つにまとめたり出来ないものでしょうか?
どうかよろしくお願いいたします。

追記です。
HTMLとCSSを追加します。

<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script>
      var today = function(){
        var now = new Date();
        var month = now.getMonth();
        var date = now.getDate();
        var today = '#' + (month + 1) + date;
        var link = document.getElementById('btn');
        link.href = "/" + today;
          return false;
   };
    </script>

<script>
    $(function(){
    $('a[href^=#]').click(function() {
        var href= $(this).attr("href");
        var target = $(href == "#" || href == "" ? 'html' : href);
        var headerHeight = 65; //固定ヘッダーの高さ
        var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
        $('body,html').animate({scrollTop:position}, 550, 'swing');
        return false;
    });
});
    </script>
</head>

<body>
<header id="header">
<div class="top">
    <div class="title">
    <img class="logo" src="img/logo.svg">
    </div>
<div class="subtitle">
    <h1>Oita Live Event</h1>
    </div>
    </div>
    <div id="sns"><a href="http://www.twitter.com"><img class="twitter" src="img/twitter.svg"></a></div>
    </header>


<section class="main">
    <a id="btn" onclick="today()" href=""><img class="today" src="img/today.svg"></a>

    <div class="wrap"><p class="date" id="1201">
        12/1 Fri
        </p></div>
    <div class="event">

    </div>

    <div class="wrap"><p class="date" id="1202">
        12/2 Sat
        </p></div>
    <div class="event">

    </div>

    <div class="wrap"><p class="date" id="1203">
        12/3 Sun
        </p></div>
以下繰り返し
 </section>
</body>
</html>
@charset "UTF-8";
/* CSS Document */

html {
    font-size: 62.5%;
}

*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
    color: #000000;
}

body {
    font-family:sans-serif;
    max-width: 100%;
    margin: 20px auto 0;
}

#header {
    display: flex;
    position: fixed;
    width: 100%;
    height: 65px;
    border-bottom: 3px solid #000;
}
.logo {
    margin: 0 20px;
    height: 80px;
}
.subtitle h1 {
    font-size: 3.2rem;
    padding-left: 0;
}
.top {
    margin: 0 auto;
    display: flex;
}
#sns {
    display: block;
    position: absolute;
    right: 10px;
    top: 50px;
}

.twitter {
    width: 25px;
}

.main {
    margin: 0 auto;
    padding-top: 110px;
    max-width: 900px;
    width: 70%;
}

.today {
    display: block;
    width: 120px;
    margin: 55px auto;
    transition: 0.3s;
}

#btn{
    display: block;
    text-decoration: none;
    background-color: #ff0000;
    color: #FFF;
    width: 150px;
    height: 150px;
    line-height: 120px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0px 7px 2px rgba(0, 0, 0, 0.29);
    border-bottom: solid 6px #ee0000;
    transition: .4s;
    margin: 0 auto;
}

#btn:active{
    -ms-transform: translateY(2px);
    -webkit-transform: translateY(2px);
    transform: translateY(2px);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    border-bottom: none;
}

.date {
    display: inline-block;
    border: 2px solid #000000;
    padding: 5px;
    font-size: 2rem;
    font-weight: bold;
    margin-top: 30px;
}

.event {
    border: 2px solid #000000;
    padding: 10px 30px;
    margin: 0 20px 20px;
}

こういった感じです。
ちなみに#1217等のリンクへ飛ぶスクリプトとスクロールしてヘッダー分高さをずらすスクリプト、
それぞれ片方だけなら動作します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • s8_chu

    2017/12/16 03:35

    HTML, CSSを可能な限り追記していただけませんか?

    キャンセル

  • wcourage

    2017/12/18 10:16

    追記いたしました。よろしくお願いいたします。

    キャンセル

回答 2

checkベストアンサー

+1

お求めのコードは2個存在する<script>タグの中身を統合し「todayボタンクリック時に、当日のイベント位置にスムーススクロール」といった物で良かったでしょうか。
実際に動作させてはいませんが、下記のようなコードで動作するかと思います。

todayファンクションは統合に合わせ削除となりますので、todayボタンを囲むaタグからonclick記述は削除するようにして下さい。

    $(function(){
        // ヘッダの高さ
        var headerHeight = 65;    // もしくは $('#header').height() + 余白値;

        // todayボタンが押された際に日付位置までスクロールさせる。
        $('#btn .today').click(function() {
            // アンカー名(月日)作成
            var date = new Date();
            var m =('0' + (date.getMonth() +1)).slice(-2);
            var d =('0' + date.getDate()).slice(-2);
            var anchor = m+d;

            // ターゲットとなる要素を取得
            var target = $('#'+anchor);

            // スムーススクロールさせる
            var position = target.offset().top - headerHeight; // ターゲットの座標からヘッダの高さ分引く
            $('body, html').animate({scrollTop:position}, 550, 'swing');
            return false;
        });
    });

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/18 18:20

    ありがとうございます!無事動作しました。
    本当に感謝です。
    ちなみにもしよろしければでかまわないのですが、後学のためになぜ動作しなかったか、
    お分かりになる範囲で推測でも構わないので、お教えいただければ嬉しいです。

    何はともあれ、本当にありがとうございました!

    キャンセル

  • 2017/12/19 19:47

    無事動作されたようで何よりです!

    元のコード(と変更理由)に関しましては下記の通りとなっています。

    ■クリックイベントの登録先が適切でなかった
    クリックイベントの登録対象要素として指定していた「a[href^=#]」は aタグ の href(リンク先) が "#" から始まるものという指定で、aタグに "#" から始まる href が指定されていないので、クリックイベントそのものが登録されていない状態でした。
    ※記述されていたコードであれば、aタグ の href に "#1217" のような移動先のアンカー名が指定されていれば限定的には動作したのでは無いでしょうか

    なので、まず上記理由により "#btn .today"(本日のライブイベントボタン?) をクリックした際にイベントが着火するように変更しています。

    ■目的の動作を実現するには適切なコードでなかった
    今回は href での指定はせずに Javascript で動的にスクロールさせるのが目的ですので、処理内容も同様に適切な内容ではありませんでした。
    元々のクリックイベント内に記述されていた処理で、回答コードでは完全に除去した下記コードはそれぞれ行末に追記したコメントのような目的となっているので、今回は不要です。

    var href= $(this).attr("href"); // クリックされた aタグ の href を取得
    var target = $(href == "#" || href == "" ? 'html' : href); // href が"#"か空っぽであれば htmlタグ を取得、それ以外であれば href で指定された要素を取得

    これの代わりに today() に記述していた「#MMDD」文字列を作成していたロジックを移動・修正し、ターゲット要素の取得に利用しています。
    ※日付取得時に ('0' + date.getDate()).slice(-2) としているのは、日が1桁の日付の場合でも必ず2桁の日付となるようにする為の対策です
     例えば getDate() で取得した日付が 19日 の場合、一度 ("0" + 19) で "019" という文字列を用意し、slice(-2) で後ろ2文字を取得する事で '19' にします。1月の場合は "01"、後ろ2文字を取得しても同様なので、必ず2桁の日付が取得できるようになっています


    ささっと返信を作成してしまったので、読みにくい箇所や、伝わらない箇所もあるかもしれませんが、ご不明点ありましたら、どうぞ返信頂ければと思います。

    サイト作成がんばってくださいね!

    キャンセル

0

試しにjQueryのセレクタを以下のように直してみてください。

a[href^=#] ではなく
a[href^="#"] に変更する

コードを流し読みなので違うかもしれませんが、、。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/18 09:55

    試してみましたが動作は変わりませんでした。
    ちなみにJqueryのバージョンは1.6です。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    16431questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    6709questions

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

  • HTML5

    4018questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。