上昇ブログ

people for the living

cssでトップページに移動/戻る/飛ぶボタンを簡単に実装する

cssでトップページにジャンプ、トップページに戻る

をシンプルに実装する。

以下のコードを、css内に書くと、htmlの中には何も書かなくてもトップページに移動ボタンが表示される。

<style>
<!DOCTYPE html>
<html>
<head>
<!-- カレントディレクトリに「jquery-2.2.1.min.js」を配置してください-->
<script type="text/javascript" src="./jquery-2.2.1.min.js"></script>
<script type="text/javascript">
<!-- ページトップにジャンプ -->
$(function(){
    $('body').append('<a href="javascript:void(0);" id="fixedTop">▲</a>');
    $('#fixedTop').on('click',function(){
        $('html,body').animate({scrollTop:'0'},500);
    });
});


</script>
<style>
<!-- ページトップにジャンプ -->
@charset "utf-8";
/* ------------------------------
   DESIGN/LAYOUT ELEMENTS
------------------------------ */
a:link,a:visited,a:active { text-decoration: none; color: #fff;}
a:hover { text-decoration: none;}
/* ------------------------------
   CHAPTER ELEMENTS
------------------------------ */
#fixedTop {
    padding: 15px 20px;
    right: 10px;
    bottom: 10px;
    color: #fff;
    text-align: center;
    display: block;
    background: #000;
    position: fixed;
    z-index: 99;
}
</style>
</head>
<body>
~~本文~~
</body>
</html>
</script>




作りながら学ぶjQueryデザインの教科書

jqueryでデザイン操作は、これで勉強しました。
書かれているコードがシンプルでわかりやすい。