はてなブログにおけるJavaScriptでスクロールの途中でボタンを出すのでR

以前に、この記事で、はてなブログでトップページに戻るボタンを実装したのでR。

その時に、スクロールの途中でトップページに戻るボタンが出るようにしたのでR。

その時のJavaScriptが、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   $(window).scroll(function() {
       if ($(this).scrollTop() > 200) {
           $('#pagetop').fadeIn();
       } else {
          $('#pagetop').fadeOut();
       }
   });
   $('#pagetop').click(function() {
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
});
</script>

だったのでR。

これを応用すると、トップボタンでなくてもスクロールの途中でボタンが出せるのでR。

例えば、

この記事で扱ったSNSのシェアボタンなども対象にできるのでR。

そこで、これをはてなブログで試してみるのでR。

まず、シェアボタンのCSSの、

.fixed-share-buttons{
text-align: left;
position:fixed;
left:10px;
bottom:8px;
z-index: 100;
}
 
.fixed-share-buttons a {
position: relative;
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
line-height: 36px;
border-radius:50%;
font-size: 16px;
color: #ffffff;
text-decoration: none; 
padding: 0;
margin:5px;
opacity:0.8;
}
 
.fixed-share-buttons .hatena-bookmark{
background: #008fde;
}
.fixed-share-buttons .facebook{
background: #305097;
}
.fixed-share-buttons .twitter{
background: #55acee;
}
.fixed-share-buttons .pocket{
background: #EE4256;
}
.fixed-share-buttons .line{
background: #5ae628;

に注目して、これの.fixed-share-buttonsをさっきのJavaScriptに記述するのでR。

方法は、#pagetopを.fixed-share-buttonsに変えて、

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script>
$(function () {
   $(window).scroll(function() {
       if ($(this).scrollTop() > 200) {
           $('.fixed-share-buttons').fadeIn();
       } else {
          $('.fixed-share-buttons').fadeOut();
       }
   });
   $('.fixed-share-buttons').click(function() {
       $('html, body').animate({
           scrollTop: 0
       }, 300);
       return false;
   });
});
</script>

とすると、一応できたのでR。

ただし、最初からボタンが出現して、スクロール後に元に戻すと消えるのでR。

そのため、最初からボタンを消す場合には、.fixed-share-buttonsに

.fixed-share-buttons{
text-align: left;
position:fixed;
left:10px;
bottom:8px;
z-index: 100;
display:none;
}

dislpay:noneを追加する必要があったのでＲ。

これで、はてなブログにおけるJavaScriptでスクロールの途中でSNSシェアボタンが出るようになったのでR。

この方の記事を参考にできたのでR。

その他にも方法があって、その場合は、こちらの方の記事を参考にできそうなのでR。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─