0

サイトに単純な「一番上にスクロール」ボタンを実装しようとしています。

HTML:

<a href="#" id="scrolltotop"><img src="img/scrolltotop.png"></a>

CSS:

#scrolltotop {
width: 40px;
height: 40px;
position: fixed;
right: 100px;
bottom: 50px;
display: block;     
}

JS:

jQuery(document).ready(function($){
$(window).scroll(function(){
    if ($(this).scrollTop() > 150) {
        $('#scrolltotop').fadeIn('slow');
    } else {
        $('#scrolltotop').fadeOut('slow');
    }
});
$('#scrolltotop').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 500);
    return false;
});
});

ページをロードすると、ボタンが適切な場所に一瞬div表示されますが、HTML 構造のページの下にある の 1 つの背景で覆われています。結局、ページのどこにも表示されず、要素を調べると正しい場所にあり、表示されていません。

4

2 に答える 2

1

display:none;イニシャルを追加するだけでいいと思います#scrolltotop：

#scrolltotop {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 100px;
    bottom: 50px;
    display:none;
}

実施例

使用するときは、要素の初期表示状態を設定する必要があります。これにより、既に存在する要素を使用fadeIn()しようとしていません。fadeIn()

于 2013-07-25T18:12:50.173 に答える