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

###前提・実現したいこと
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"> 
１２月１５日
</p>
<p id="1216"> 
１２月１6日
</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の知識もほとんどないので、
どこがおかしいのかわかりません。
できればこの２つのスクリプトをきちんと動作させて、さらに一つにまとめたり出来ないものでしょうか？
どうかよろしくお願いいたします。

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

HTML
1<!doctype html>
2<html lang="ja">
3<head>
4<meta charset="UTF-8">
5<title>タイトル</title>
6<meta name="viewport" content="width=device-width">
7<link rel="stylesheet" href="css/normalize.css">
8<link rel="stylesheet" href="css/style.css">
9<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js"></script>
10<script>
11    　　var today = function(){
12        var now = new Date();
13        var month = now.getMonth();
14        var date = now.getDate();
15        var today = '#' + (month + 1) + date;
16        var link = document.getElementById('btn');
17        link.href = "/" + today;
18          return false;
19   };
20    </script>
21
22<script>
23    $(function(){
24    $('a[href^=#]').click(function() {
25        var href= $(this).attr("href");
26        var target = $(href == "#" || href == "" ? 'html' : href);
27        var headerHeight = 65; //固定ヘッダーの高さ
28        var position = target.offset().top - headerHeight; //ターゲットの座標からヘッダの高さ分引く
29        $('body,html').animate({scrollTop:position}, 550, 'swing');
30        return false;
31    });
32});
33    </script>
34</head>
35
36<body>
37<header id="header">
38<div class="top">
39	<div class="title">
40	<img class="logo" src="img/logo.svg">
41	</div>
42<div class="subtitle">
43	<h1>Oita Live Event</h1>
44	</div>
45	</div>
46	<div id="sns"><a href="http://www.twitter.com"><img class="twitter" src="img/twitter.svg"></a></div>
47	</header>
48	
49	
50<section class="main">
51	<a id="btn" onclick="today()" href=""><img class="today" src="img/today.svg"></a>
52
53	<div class="wrap"><p class="date" id="1201">
54		12/1 Fri
55		</p></div>
56	<div class="event">
57		
58　　　　</div>
59
60	<div class="wrap"><p class="date" id="1202">
61		12/2 Sat
62		</p></div>
63	<div class="event">
64
65	</div>
66
67	<div class="wrap"><p class="date" id="1203">
68		12/3 Sun
69		</p></div>
70以下繰り返し
71 </section>
72</body>
73</html>

CSS
1@charset "UTF-8";
2/* CSS Document */
3
4html {
5	font-size: 62.5%;
6}
7
8*, *::before, *::after {
9	box-sizing: border-box;
10}
11a {
12	text-decoration: none;
13    color: #000000;
14}
15
16body {
17	font-family:sans-serif;
18    max-width: 100%;
19    margin: 20px auto 0;
20}
21
22#header {
23	display: flex;
24	position: fixed;
25	width: 100%;
26	height: 65px;
27	border-bottom: 3px solid #000;
28}
29.logo {
30	margin: 0 20px;
31	height: 80px;
32}
33.subtitle h1 {
34	font-size: 3.2rem;
35	padding-left: 0;
36}
37.top {
38	margin: 0 auto;
39	display: flex;
40}
41#sns {
42	display: block;
43	position: absolute;
44	right: 10px;
45	top: 50px;
46}
47
48.twitter {
49	width: 25px;
50}
51
52.main {
53	margin: 0 auto;
54	padding-top: 110px;
55	max-width: 900px;
56	width: 70%;
57}
58
59.today {
60	display: block;
61	width: 120px;
62	margin: 55px auto;
63	transition: 0.3s;
64}
65
66#btn{
67    display: block;
68    text-decoration: none;
69    background-color: #ff0000;
70    color: #FFF;
71    width: 150px;
72    height: 150px;
73    line-height: 120px;
74    border-radius: 50%;
75    overflow: hidden;
76    box-shadow: 0px 7px 2px rgba(0, 0, 0, 0.29);
77    border-bottom: solid 6px #ee0000;
78    transition: .4s;
79	margin: 0 auto;
80}
81
82#btn:active{
83    -ms-transform: translateY(2px);
84    -webkit-transform: translateY(2px);
85    transform: translateY(2px);
86    box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
87    border-bottom: none;
88}
89
90.date {
91	display: inline-block;
92	border: 2px solid #000000;
93	padding: 5px;
94	font-size: 2rem;
95	font-weight: bold;
96	margin-top: 30px;
97}
98
99.event {
100	border: 2px solid #000000;
101	padding: 10px 30px;
102	margin: 0 20px 20px;
103}

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

s8_chu

2017/12/15 18:35

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

wcourage

2017/12/18 01:16

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

javascript
1    $(function(){
2        // ヘッダの高さ
3        var headerHeight = 65;    // もしくは $('#header').height() + 余白値;
4
5        // todayボタンが押された際に日付位置までスクロールさせる。
6        $('#btn .today').click(function() {
7            // アンカー名(月日)作成
8            var date = new Date();
9            var m =('0' + (date.getMonth() +1)).slice(-2);
10            var d =('0' + date.getDate()).slice(-2);
11            var anchor = m+d;
12
13            // ターゲットとなる要素を取得
14            var target = $('#'+anchor);
15
16            // スムーススクロール
17            var position = target.offset().top - headerHeight; // ターゲットの座標からヘッダの高さ分引く
18            $('body, html').animate({scrollTop:position}, 550, 'swing');
19            return false;
20        });
21    });

投稿2017/12/18 07:27

編集2017/12/18 07:39

momoya

総合スコア29

wcourage

2017/12/18 09:20

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

momoya

2017/12/19 10: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桁の日付が取得できるようになっていますささっと返信を作成してしまったので、読みにくい箇所や、伝わらない箇所もあるかもしれませんが、ご不明点ありましたら、どうぞ返信頂ければと思います。サイト作成がんばってくださいね！

行動規範の内容に同意します