ボタンに問題があります。高さのウィンドウサイズを変更したときに、ボタンを同じ高さに保つにはどうすればよいですか?高さが変わるので、それを追いかけたり、押し下げたりしたくありません...
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/
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加