保持滚动到同一高度的顶部按钮？

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/