Требуется помощь
У меня на сайте стоит кнопка вверх. Опустившись по сайту, эта кнопка выходит.
Проблема в том, что кнопка выходит не плавно, а с каким-то подтормаживанием. Я выяснил это - конфликт анимации JS и своиств CSS Transition. Transition у меня стоит на всех кнопках, в том числе и на button. Мне нужно переделать JS код кнопки, чтоб выполнялись только условия Transition. Сама кнопка: <button id="go-top"> <a class="go-top-icon icon icon-arrow-top"></a> </button> JS код кнопки:
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop()){
$('#go-top').stop().animate({
bottom: '24px'
});
}
else{
$('#go-top').stop().animate({
bottom: '-64px'
});
}
});
$('#go-top').click(function() {
$('html, body').stop().animate({
scrollTop: 0
}, 600, function() {
$('#go-top').stop().animate({
bottom: '-64px'
});
});
});
});
И её же CSS.
#go-top {
background-color: #cc3333;
height: 56px;
bottom: -64px;
right: 24px;
position: relative;
width: 56px;
border: none;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,.14),0 0 8px rgba(0,0,0,.28);rgba(0,0,0,.28);
box-sizing: content-box;
cursor: pointer;
outline: none;
padding: 0;
pointer-events: auto;
position: fixed;
-webkit-user-drag: none;
}
.go-top-icon {
left: 0;
background-size: 24px;
display: block;
margin: auto;
-webkit-user-drag: none;
}
.go-top-icon:before {
font-size: 32px;
color: white;
}
А в другом файле прописан Transition
input, button, textarea, select, label, a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
|
http://learn.javascript.ru/play/k47MBb
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
body, html {
height: 2000px;
}
.go-up {
border: 20px solid transparent;
border-bottom-color: #333;
bottom: 20px;
opacity: 0;
position: fixed;
right: 10px;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
visibility: hidden;
z-index: 100;
}
.go-up.go-up-show {
opacity: 0.9;
visibility: visible;
}
.go-up.go-up-show:hover {
cursor: pointer;
opacity: 1;
}
</style>
</head>
<body>
<div class="go-up" title="UP"></div>
<script type="text/javascript">
var goUpElem = document.querySelector('.go-up'),
goUpHidden = true;
window.onscroll = function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if(scrollTop >= 500 == goUpHidden) {
goUpElem.classList[goUpHidden ? 'add' : 'remove']('go-up-show');
goUpHidden = !goUpHidden;
}
};
goUpElem.onclick = function() {
window.scrollTo(0, 0);
};
</script>
</body>
</html>
|
Спасибо, совсем не знаю JS, но извлек из вашего кода то что надо, на глаз.
|
| Часовой пояс GMT +3, время: 02:13. |