-1

非常に長いため、ポップアップとして開くjQuery selectmenuリストがあります。私が欲しいのは、リストの最後にある「トップに戻る」ボタンです。ポップアップの下にあると想像するため、「トップに戻る」テキストが表示されないことを除いて、このトリックを実行する必要があるように見えるこのチュートリアルを見つけました。これを回避する方法はありますか？または、「トップに戻る」ソリューションの別の実装ですか?

4

1 に答える 1

0

パーツごとに分解します。<a href="#">Back to Top</a>自動的にページのトップに移動します。それはロケット科学ではありません。

次に、CSS を使用してスタイルを追加できます。この場合、チュートリアルでは「back to top」クラスを使用します。<a href="#" class="back-to-top">Back to Top</a>. 大したことではなく、これを好きなように見せることができます。

ただし、このコードを保持することをお勧めします。position: fixed; bottom: 2em; right: 0px;. 補足として、 に置き換えposition:fixedてposition:relative、ポップアップに表示されるようにします。

次に、滑らかなスクロール効果など、必要なものを追加できます。

jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
    if (jQuery(this).scrollTop() > offset) {
        jQuery('.back-to-top').fadeIn(duration);
    } else {
        jQuery('.back-to-top').fadeOut(duration);
    }
});

jQuery('.back-to-top').click(function(event) {
    event.preventDefault();
    jQuery('html, body').animate({scrollTop: 0}, duration);
    return false;
})
});

それがどうなるか教えてください。乾杯、セバスチャン。

于 2016-10-07T04:25:01.277 に答える