Question

我的按钮出了问题。我想要的是当高度上的窗户尺寸改变时，如何强制按钮保持在同一高度？当高度改变时，我不希望它跟随或被压下......

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/

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

1 个答案: