javascript - 保持滚动到相同高度的顶部按钮？

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;

如果您希望像素数量基于视口(viewport)高度，您可以使用

$(window).height();

因此，要始终在距离顶部 N % 的位置显示按钮并保持它在视口(viewport)调整大小的情况下，您可以这样做:

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

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

请在此处查看:http://jsfiddle.net/ccq9cs9L/9/