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

Question

我的按鈕有問題。 我想要的是更改高度上的窗口大小時，如何強制按鈕保持在相同高度？ 我不希望它隨着高度的變化而跟隨或被按下...

http://jsfiddle.net/ccq9cs9L/3/

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;
});

Answer 1

如果我理解正確，那么您的問題實際上是關於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/