保持滚动到顶部按钮在相同的高度?
问题描述:
我的按钮有问题。我想要的是当窗户的高度发生变化时,如何强制按钮保持在同一高度?我不希望它跟随或高度改变时按下...保持滚动到顶部按钮在相同的高度?
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;
});
答
如果我正确理解你,你的问题实际上是关于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/
现在按钮保持在相同的位置(由于'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