Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(function () {
/** ページトップ処理 **/
// スクロールした場合
$(window).scroll(function() {
// スクロール位置が1000を超えた場合
if ($(this).scrollTop() > 1000) {
$('#pagetop').fadeIn();
} else {
// ページトップへをフェードアウト
$('#pagetop').fadeOut();
}
});
// ページトップクリック
$('#pagetop').click(function() {
// ページトップへスクロール
$('html, body').animate({
scrollTop: 0
}, 300);
return false;
});
})(jQuery);
</script>
<a id="pagetop" href="#top" class="page_top" style="display: none;"><img src="画像のURL" alt="ページTOPへ"></a>
/* ページトップへ戻るボタン */
#pagetop {
position:fixed;
bottom:10px;
right:300px;
padding:0;
}
/* ページトップへ戻るボタン:ホバー時に画像が白みがかったようにする*/
#pagetop:hover {
cursor:pointer;
filter: alpha(opacity=60); /* ie lt 8 */
-ms-filter: "alpha(opacity=60)"; /* ie 8 */
-moz-opacity:0.6; /* FF lt 1.5, Netscape */
-khtml-opacity: 0.6; /* Safari 1.x */
opacity:0.6;
zoom:1;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.