ページトップへ戻るスムーズスクロール（jQueryなし）

• HTML
• Javascript
• CSS
• はてなブログ用
• お問い合わせ等

当サイトの右下に表示している「 」は、クリックしますとスクロールしてページトップに戻ります。こうした「ページトップに戻る」リンクは最近では必須になってきています。これまで公開しているスクリプトにも含まれていますが、リクエストもありましたので単独で切り出してみました。「 」は、ホームページへのリンクだけです。

01HTML

<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;">アイコンまたはイメージなど</a></li>
<li><a href="あなたのブログURL">アイコンまたはイメージなど</a></li>
</ul>

02Javascript

※使用、改変は自由ですが、転載はしないでください。

function smoothScroll(targetY) {
    var startY = window.pageYOffset;
    var f = ( targetY > startY ) ? true : false; // 'down' = true : 'up' = false
    setTimeout(function(){
        if( f && (startY <= targetY)){
            startY = startY + (targetY - startY) / 20 + 1;
            window.scrollTo(0, startY);
            setTimeout(arguments.callee, 10);
        } else if ( !f && startY >= targetY){
            startY = startY - (startY - targetY) / 20 - 1;
            window.scrollTo(0, startY);
            setTimeout(arguments.callee, 10);
        }else{
            window.scrollTo(0, targetY);
        }
    }, 10);
}

03CSS

/* To Top */
.toTop-nav {
  position: fixed;
  bottom: 10px;
  right: 10px;
  display: -webkit-flex;
  display: flex;
  padding: 0;
  margin: 0;
  z-index: 999; }
  .toTop-nav li {
    list-style-type: none;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50px;
    text-align: center; }
    .toTop-nav li:first-child {
      margin-right: 10px; }
    .toTop-nav li a {
      display: block;
      width: 50px;
      height: 50px;
      font-size: 30px;
      line-height: 50px; }
      .toTop-nav li a {
        color: #fff;
        text-decoration: none; }
        .toTop-nav li a:visited {
          color: #fff; }
        .toTop-nav li a:hover {
          color: #fff;
          text-decoration: underline; }
        .toTop-nav li a:active, .toTop-nav li a:focus {
          color: #fff; }
      .toTop-nav li a:hover {
        text-decoration: none; }

04はてなブログ用

1. 下のコードのうち、「あなたのブログURL」をブログURLに差し替え、デザイン > カスタマイズ > フッタ に入れてください。
2. 上の CSSを デザイン > カスタマイズ > デザインCSS に入れてください。

<ul class="toTop-nav">
<li><a href="javascript:void(0);" onclick="smoothScroll(0);return false;"><i class="blogicon-chevron-up"></i></a></li>
<li><a href="あなたのブログURL"><i class="blogicon-home"></i></a></li>
</ul>
<script>
function smoothScroll(o){var e=window.pageYOffset,l=o>e;setTimeout(function(){l&&o>=e?(e=e+(o-e)/20+1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):!l&&e>=o?(e=e-(e-o)/20-1,window.scrollTo(0,e),setTimeout(arguments.callee,10)):window.scrollTo(0,o)},10)}
</script>

05お問い合わせ等

当記事内のスクリプト使用によるいかなる損害についても責任を負いかねますので自己責任でご使用ください。

お問い合わせ、バグの報告、仕様変更のご要望等は Contact Us までお願いします。