保持滾動到頂部按鈕在相同的高度？

我的按鈕有問題。我想要的是當窗戶的高度發生變化時，如何強制按鈕保持在同一高度？我不希望它跟隨或高度改變時按下...保持滾動到頂部按鈕在相同的高度？

HTML

<a href="#" class="scrollToTop hidden-phone"> 
    <span class="icon icon-arrow-up-white"></span> 
</a> 
<div class="myDiv"> 
    <div class="myContent"> 
     a lot of text 
    </div> 
</div>

CSS

a.scrollToTop { 
    content: ""; 
    z-index: 1000; 
    width: 60px; 
    height: 45px; 
    background: #78b209; 
    position: fixed; 
    top: 35.5%; 
    right: 0; 
    display: none; 
}

JavaScript

$(document).scroll(function(e) { // This is scrollToTop button 
    e.preventDefault(); 
    if ($(this).scrollTop() > 100) { 
     $('.scrollToTop').fadeIn(); 
    } else { 
     $('.scrollToTop').fadeOut(); 
    } 
}); 
$('.scrollToTop').click(function() { // Scroll to top with ease 
    $('html, body').animate({ scrollTop: 0 }, 1000, 'easeOutExpo'); 
    return false; 
});

來源

2014-09-12 maverick

現在按鈕保持在相同的位置（由於'position：fixed;'）。這是不是所需的行爲？ – Regent 2014-09-12 13:09:50

你的意思是說，當頁面高度增加時，按鈕在頁面上移動的更高？如果是這樣，那是因爲你有這樣的：'a.scrollToTop {top：35.5％;}' – wf4 2014-09-12 13:13:59

是的，但我希望卷軸始終保持在同一位置，即使我有固定的位置......試圖弄清楚如何在一些jQuery中調整高度...有人可以幫助我嗎？ – maverick 2014-09-12 13:14:45

如果我正確理解你，你的問題實際上是關於CSS。試着改變top: 35.5%;靜態量，例如top: 100px;

如果你想立足於視高度的像素數量，你可以得到與

$(window).height();

所以總是顯示在位置N按鈕％從頂部和那裏保持它儘管視調整，你可以這樣做：

function positionButton() { 
    var percFromTop = 35, 
     newHeight = $(window).height()/100 * percFromTop; 
    $(".scrollToTop").css("top", newHeight+"px"); 
} 

$(document).ready(function() { 
    positionButton(); 
};

看到它在這裏搗鼓：http://jsfiddle.net/ccq9cs9L/9/

來源

2014-09-12 13:25:51 Schlaus

我認爲OP正在尋找一種方法來動態設置距離頂端的距離，以便它具有被修復的印象。如果窗口調整大小，此答案將使按鈕向上移動。 – wf4 2014-09-12 13:28:09

@ wf4 OP字在__處與always_，_stay處於同一位置__處於同一height_。所以它看起來像是正確的答案，不是嗎？ – Regent 2014-09-12 13:36:39

@ wf4的確，我希望按鈕對我來說是動態的，是的！添加像素而不是百分比不能解決我的問題。 – maverick 2014-09-12 13:40:45

保持滾動到頂部按鈕在相同的高度？

回答

相關問題