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;

}

•  結局、「smooth scroll」はプラグインで

•  このプラグインを使います。結構簡単でいい。日本の方が作ったのでしょうか？
• 日本語の解説があります。
• http://www.msng.info/archives/2015/12/jquery-smoothscroll.php
• jsフォルダにjquery.smoothScroll.min.js
• </body>の直前にいかの記述を追加する。たったこれだけ！

<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タグを用意して、空のタグに移動するように記述すればよい。
• レスポンシブについても考えておかなければなりません。