Я сделал две полупрозрачные "кнопки", появляющиеся слева страницы на одном и том же месте.
- Кнопка А появляется, когда пользователь чуть прокрутил ползунок (чтобы нажав на нее, пользователь мог вернуться на верх страницы).
- Кнопка Б появляется в самом верху страницы вместо кнопки А, чтобы вернуться на предыдущую страницу.
Они исправно работают, если пользователь прокрутил ползунок хоть чуть-чуть. Но при первом заходе на страницу они появляются друг поверх друга. Как желательно с помощью jquery сделать так, чтобы при первом заходе на страницу два этих блока не появлялись друг поверх друга?
$(function(){
var hide = window.scroll(0, 1);
$('body').animate({ scrollTop: hide }, 1);
$("#scrolltothetopExtra").bind('click', function(e){
e.preventDefault();
$('body,html').animate({scrollTop: 0}, 300);
});
$("#scrolltothetop").bind('click', function(e){
e.preventDefault();
$('body,html').animate({scrollTop: 0}, 300);
});
$("#scrolltothetop").hover(function () {
$(this).animate({
backgroundColor : '#8A8A8A',
}, 200);
}, function () {
$(this).animate({
backgroundColor : '',
}, 200);
});
$("#scrolltothetopExtra").hover(function () {
$("#scrolltothetop").animate({
backgroundColor : '#8A8A8A',
}, 200);
}, function () {
$("#scrolltothetop").animate({
backgroundColor : '',
}, 200);
});
$("#goback").hover(function () {
$(this).animate({
backgroundColor : '#8A8A8A',
}, 200);
}, function () {
$(this).animate({
backgroundColor : '',
}, 200);
});
$( window ).scroll(function() {
var y = window.scrollY
if (y == 0) {
$('#scrolltothetopExtra').css({
'display' : 'none',
});
$('#scrolltothetop').css({
'display' : 'none',
});
$('#goback').css({
'display' : 'block',
});
} else {
$('#scrolltothetopExtra').css({
'display' : 'block',
});
$('#scrolltothetop').css({
'display' : 'block',
});
$('#goback').css({
'display' : 'none',
});
}
});
});
<!-- для того чтобы был скролл -->
<div style='height:2000px;width:1px;background:white;'></div>
<!-- это код для кнопки наверх -->
<div style="display: block;width: 170px;height: 100%;opacity: 0.3;position: fixed;top: 0;left: 0;right: 0;z-index: 10;cursor: pointer;" id='scrolltothetop'>
<div style="display: block;width: 1px;height: 35px;"></div>
<div style="margin-left: 35px;">
<img src="../img/up.png">
<b style="z-index: 2;font-family: Arial;font-size: 20px;">Наверх</b>
</div>
</div>
<div id="scrolltothetopExtra" style="display: block;height: 100%;position: fixed;top: 0;left: 0;right: 0;z-index: 1000;cursor: pointer;"></div>
<!-- это для кнопки на предыд страницу -->
<div onclick="javascript:history.back();return false;" style="display: block;width: 170px;height: 100%;opacity: 0.3;position: fixed;top: 0;left: 0;right: 0;cursor: pointer;" id="goback">
<div style="display: block;width: 1px;height: 35px;"></div>
<div style="margin-left: 20px;">
<div style="margin-left: 20px;">
<img style="transform: rotate(-90deg);" src="../img/up.png">
<img style="transform: rotate(-90deg);" src="../img/up.png">
<img style="transform: rotate(-90deg);" src="../img/up.png">
</div>
<br>
<b style="z-index: 2;font-family: Arial;font-size: 20px;margin-left: 50px;">На</b>
<b style="z-index: 2;font-family: Arial;font-size: 20px;">предыдущую</b>
<b style="z-index: 2;font-family: Arial;font-size: 20px;margin-left: 20px;">страницу</b>
</div>
</div>