CMS Geeklog開発周辺覚書

 Saturday, November 23 2024 @ 05:09 PM JST

jQueryのSimple Back To Top Linkを追加する方法

  • Tuesday, September 23 2014 @ 10:15 PM JST
  • 投稿者:
  • 表示回数 12,190
Geeklog

UIkitを活用したGeeklogサイトに、jQueryのSimple Back To Top Linkを追加する方法です。

１．footer.thtml に以下のHTMLを追加。


<p id="back-to-top"><a href="#top" style="display: block;"><i class="uk-icon-chevron-up"></i></a></p>

２．footer.thtmlに以下のjavascriptを追加。

※{plg_footercode} でjQuery本体を組み込んでいるのでこの後に追加します。 


<!-- Simple Back To Top Link jQuery -->
<script type="text/javascript">
    $(document).ready(function(){
    $("#back-to-top").hide();
    $(function () {
        $(window).scroll(function(){
        if ($(window).scrollTop()>100){
        $("#back-to-top").fadeIn(1500);
        }
        else
        {
        $("#back-to-top").fadeOut(1500);
        }
        });
        //back to top
        $("#back-to-top").click(function(){
        $('body,html').animate({scrollTop:0},1000);
        return false;
        });
        });
        });
</script>
<!-- } Simple Back To Top Link jQuery -->

3. テーマのcustom.css に以下のスタイルを追加


/*
Back to top button 
*/
#back-to-top {background:#ba224b;background:rgba(186,34,75,0.75);box-shadow:0 0 2px 0 rgba(255,255,255,0.2);border-radius:3px;bottom:20px;cursor:pointer;display:block;height:45px;line-height:45px;font-size:16px;position:fixed;right:20px;text-align:center;width:45px;z-index:9999;}#back-to-top:hover {background-color:#147D85;background:rgba(199, 8, 80, 0.75);text-decoration:none;}
#back-to-top i {color:#fff;}

参考：http://www.jqueryscript.net/other/Simple-Back-To-Top-Link.html