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

我的按钮有问题。我想要的是当窗户的高度发生变化时，如何强制按钮保持在同一高度？我不希望它跟随或高度改变时按下...保持滚动到顶部按钮在相同的高度？

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

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

回答

相关问题