webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

header を position:fixed; そして smooth scroll にしたい。

  • 上手くいかなかったときの記述。なにがどのように悪さしていたのかは不明。
  • ページトップに移動するボタンに<a>がついていなかった。
  • <div id="content">が閉じていなかった。これは問題外!

htmlを修正

<div class="arrow "><a href="#"><i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i></a></div>

  • 結局これは元に戻します。後ほど説明。

cssを修正

  • headerはposition: fixed;、z-index: 100; で固定。
  • その下の、smoothにscrollする箇所を囲う#contentを作った。

#header{
width: 100%;
height: 72px;
background: #e3e3e3;
position: fixed;
z-index: 100;
}

  • #contentに対して、position: absolute;をやめ、padding-top: 72px;に修正した。
  • ここが一番の原因だろうね。

#content{
position:absolute;
top: 72px;
left: 0px;
width: 100%;

padding-top: 72px;

}

<script src="js/jquery-2.2.3.min.js"></script>

<script src="js/jquery-migrate-1.3.0.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/billboard_arrow.js"></script>
<script src="js/jquery.smoothScroll.min.js"></script> 

 </div><!--content-->
<script>
$('a').smoothScroll();
</script>
</body>

  • ボタンは別立てにしたかったので、<a href="#">を外して、別に記述しました。
  • 後日追記 ページ内リンクは強力なので、最優先されてしまいます。JSファイルでを使って、ページトップに戻る記述をしても、ページ内リンクにはかないません。
  • ページトップに戻るリンクを複数作るときには、空のDIVタグを用意して、空のタグに移動するように記述すればよい。
  • レスポンシブについても考えておかなければなりません。