"トップに戻る" jQueryポップアップで動作する要素

Question

私はjQueryの選択メニューリストを持っています。私が望むのは、リストの最後にある "トップに戻る"ボタンです。私はthis tutorialのように見えますが、それはポップアップの下にあると想像しているので、「トップに戻る」テキストが表示されない点を除いて、トリックを行う必要があります。これを回避する方法は？または、「トップに戻る」ソリューションの別の実装ですか？

Answer 1

部品ごとに分解してください。 <a href="#">Back to Top</a>が自動的にあなたをページの上部に置きます。ロケット科学ではありません。

次に、CSSを使用してスタイリングを追加できます。この場合、このチュートリアルでは、クラス「トップに戻る」を使用します。 <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; 
}) 
}); 

どうすればいいか教えてください。乾杯、セバスチャン。