質問: target.offset().top; $('body,html').stop().animate({scrollTop:position}, 500,'swing'); } }) ``` ``` hoge fuga ``` ページ内、ページ外アンカーリンクは実装されました!ありがとうございます。 ですがページ内リンクでのスムーススクロールが実行されません。 console.log(urlHash);もページ外リンクでは#hoge、#fugaが表示されますが topページだと何も表示されなくなってしまい以下のようなエラーが出ます。 ``` jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#hoge at Function.se.error (jquery.min.js:2) at se.tokenize (jquery.min.js:2) at se.select (jquery.min.js:2) at Function.se [as find] (jquery.min.js:2) at k.fn.init.find (jquery.min.js:2) at new k.fn.init (jquery.min.js:2) at k (jquery.min.js:2) at scrollToAnker ((index):58) at HTMLAnchorElement. ((index):51) at HTMLAnchorElement.dispatch (jquery.min.js:2) ``` ``` jquery.min.js:2 Uncaught Error: Syntax error, unrecognized expression: http://localhost/jver/#fuga at Function.se.error (jquery.min.js:2) at se.tokenize (jquery.min.js:2) at se.select (jquery.min.js:2) at Function.se [as find] (jquery.min.js:2) at k.fn.init.find (jquery.min.js:2) at new k.fn.init (jquery.min.js:2) at k (jquery.min.js:2) at scrollToAnker ((index):58) at HTMLAnchorElement. ((index):51) at HTMLAnchorElement.dispatch (jquery.min.js:2) ``` どこをどうすればいいのかもわからなくなってしまいました。 スムーススクロールは諦めた方が良いでしょうか...
回答: location.hashで取得した変数が本当に取得したいハッシュ値になっているかどうか **console.log(urlHash);**で確認してみてください。`#xxxxxxxxx`となっていないと、そのままセレクタに放り込んでもIDと認識してくれませんし、offsetメソッドが未定義というエラーが出ているなら、おそらくセレクタにならない値を指しているはずです。その場合はaタグに紐付いているhrefリンクそのものを入れないといけません。 ``` var urlHash = location.hash; console.log(urlHash); //デバッグしてみる if(urlHash) { $('body,html').stop().scrollTop(0); setTimeout(function(){ var target = $(urlHash); var position = target.offset().top + -30; $('body,html').stop().animate({scrollTop:position}, 300,'swing'); }, 100); } ``` ページ遷移時のページ内リンクのスムーススクロール