###前提・実現したいこと
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を追加します。
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}
こういった感じです。
ちなみに#1217等のリンクへ飛ぶスクリプトとスクロールしてヘッダー分高さをずらすスクリプト、
それぞれ片方だけなら動作します。
回答2件
あなたの回答
tips
プレビュー