スムーススクロールがズレてしまうことがあったので備忘録です。
一般的なスムーススクロールの記述
全体としては一般的なスムーススクロールの記述を書きました。
こちらを参考にしました。
Javascript
htmlのヘッダー部分に直接表記しました。
<script type=”text/javascript”>
$(function(){
$(‘a[href^=”#”]’).click(function(){
//スクロールのスピード
var speed = 500;
//リンク元を取得
var href= $(this).attr(“href”);
//リンク先を取得
var target = $(href == “#” || href == “” ? ‘html’ : href);
//リンク先までの距離を取得
var position = target.offset().top;
//スムーススクロール
$(“html, body”).animate({scrollTop:position}, speed, “swing”);
return false;
});
});
</script>
リンクボタンhtml
<a href=”#01″>ボタン</a>
リンク先html
<div id=”01″>ここに内容</div>
＜a name=””＞＜/a＞の記述ではズレるので注意
リンク先のスムーススクロール終点を＜a name=””＞＜/a＞の記述にしてしまうと、ブラウザによってはズレが生じます。
上にあるブラウザのバーの部分が認識されず、終点を通り過ぎる表示になってしまいます。
必ずidで記述しましょう。
飯田市でホームページ制作・広告運用をサポート｜デザインスタジオiR
牧内理恵
まきうちりえ
飯田市在住、広告制作歴20年以上。これまで200名以上のクライアント様と向き合い、100件以上のサイト制作を手掛けてきたデザイナー兼エンジニアの牧内理恵です。御社の強みを引き出し、業績アップに繋がるWebサイト・ネットショップ・販促ツールをご提案します。拠点とする長野県内はもちろん、全国各地からのご依頼にも柔軟に対応しております。
「相談してよかった」と言っていただける、飯田下伊那地域のパートナーとして。
長野県飯田市を拠点に、ホームページ制作やECサイト構築、Web運用のトラブル解決を承っています。20年以上のキャリアで培った「伝わるデザイン」と「確かな技術」で、御社の業績アップを支えます。飯田・下伊那エリアはもちろん、全国からのオンライン相談も大歓迎です。
「ホームページを作りたい」「ホームページをリニューアルしたい」といったご依頼もお気軽にお声がけください。
※強引な勧誘は一切ありませんので、安心してお悩みをお聞かせください。
