0

Я сделал две полупрозрачные "кнопки", появляющиеся слева страницы на одном и том же месте.

  • Кнопка А появляется, когда пользователь чуть прокрутил ползунок (чтобы нажав на нее, пользователь мог вернуться на верх страницы).
  • Кнопка Б появляется в самом верху страницы вместо кнопки А, чтобы вернуться на предыдущую страницу.

Они исправно работают, если пользователь прокрутил ползунок хоть чуть-чуть. Но при первом заходе на страницу они появляются друг поверх друга. Как желательно с помощью 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>

5
  • можно какой-нибудь код увидеть? Кнопок, скрипта, который отвечает за скрытие
    – ThisMan
    22 мая 2019 в 13:58
  • Если вы задаете вопрос связанный с программированием, ,будьте добры и приложите код, вы бы сами смогли ответить на подобный вопрос, не посмотрев при этом код?
    – user298256
    22 мая 2019 в 14:19
  • @ThisMan поправил вопрос. Здесь он при прокрутке все равно продолжает накладываться почему-то. На деле такого нет. Вопрос все тот-же, чтобы не накладывались сверху при первом заходе на страницу
    – Iamready
    22 мая 2019 в 14:43
  • @Vearo поправил вопрос. Здесь он при прокрутке все равно продолжает накладываться почему-то. На деле такого нет. Вопрос все тот-же, чтобы не накладывались сверху при первом заходе на страницу
    – Iamready
    22 мая 2019 в 14:43
  • Вы приводите код в вопросе, который не соответствует вопросую Как мы можем помочь в такой ситуации? Никак! 23 мая 2019 в 5:41

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Посмотрите другие вопросы с метками или задайте свой вопрос.