Задать вопрос
SeokkyN
@SeokkyN

После срабатывания скрипта автоматического скролла (аля слайд-шоу) перестает работать кнопка «наверх», кидающая на верхний якорь — где ошибка?

Помогите разобраться, пожалуйста. Я в JS/Jquery крайне неопытен, поэтому сам не догоняю, что не так.

Это скрипт на плавный скролл по кнопке "наверх".
$(function(){

$('#goTop').click(function(e){
  $('html,body').stop().animate({ scrollTop: $('.nav').offset().top }, 700);
  e.preventDefault();
});

});


Это скрипт автоматического медленного скролла.
$(function(){
$('#autoShow').click(function(e){
    var stopper = $('#stopAutoshow');
    if ($(window).width() < 940) {var showDuration = 48000;} else {var showDuration = 24000;}
    
    $('html,body').stop().animate({ scrollTop: $('.footer').offset().top}, showDuration, 'linear');
    e.preventDefault();
    stopper.slideToggle();
    stopper.click(function(){
        $('html,body').stop();
        stopper.hide();
    });
    
    var target = $('.small');
    var targetPos = target.offset().top;
    var winHeight = $(window).height();
    var scrollToElem = targetPos - winHeight;
    $(window).scroll(function(){
        var winScrollTop = $(this).scrollTop();
        if(winScrollTop > scrollToElem){
            stopper.hide();
            $('html,body').stop();
        }
});
});
});


Вот HTML, если нужно.
<body>
    <div class="nav">
        <div class="home"><p><a href="index.html">Главная</a></p></div>
        <div class="gallery currentPage"><p><a href="gallery.html">Галерея работ</a></p></div>
        <div class="contacts"><p><a href="contacts.html">Контакты</a></p></div>
    </div>
    <script src="js/mobileMenu.js"></script>
        <div class="mobileNav" style="display: none">
            <div class="menuBtn"><img src="pics/list.png" alt="menuMobile" width="50px" height="50px"></div>
            <div class="menuList">
                <a href="index.html"><div class="mobHome"><p><img src="pics/homepage.png" alt="Главная" width="25px" height="25px">Главная</p></div></a>
                <a href="gallery.html"><div class="mobGallery"><p><img src="pics/gallery.png" alt="Галерея" width="25px" height="25px">Галерея работ</p></div></a>
                <a href="contacts.html"><div class="mobContacts"><p><img src="pics/contacts.png" alt="Контакты" width="25px" height="25px">Контакты</p></div></a>
                <div class="closeMenu"><img src="pics/closeMenu.png" alt="Закрыть" width="25px" height="25px"></div>
            </div>
        </div>
     
    <a href="#bottom" id="autoShow">
       <div>
           <p>Нажмите для автоматической прокрутки</p>
           <img src="pics/closeMenu.png" alt="downArrow" width="35px" height="35px">
       </div>
    </a>     
    <div id="stopAutoshow"><p>Нажмите, чтобы остановить показ</p></div>
        
    <div class="content">
        <img src="pics/photos/6.jpg" alt="шкаф" width="450" height="500">
        <img src="pics/photos/5.jpg" alt="стенка" width="450" height="500">
        <img src="pics/photos/12.jpg" alt="стол деревянный" width="450" height="500">
        <img src="pics/photos/25.jpg" alt="кухонный гарнитур" width="450" height="500">
        <img src="pics/photos/10.jpg" alt="кровать" width="450" height="500">
        <img src="pics/photos/8.jpg" alt="стеллаж" width="450" height="500">
        <img src="pics/photos/1.jpg" alt="шкаф-купе" width="450" height="500">
        <img src="pics/photos/2.jpg" alt="шкаф-купе" width="450" height="500">
        <img src="pics/photos/13.jpg" alt="тумбочка" width="450" height="500">
        <img src="pics/photos/14.jpg" alt="компьютерный стол" width="450" height="500">
        <img src="pics/photos/16.jpg" alt="коридорный шкаф" width="450" height="500">
        <img src="pics/photos/17.jpg" alt="дверь" width="450" height="500">
        <img src="pics/photos/18.jpg" alt="шкаф купе" width="450" height="500">
        <img src="pics/photos/19.jpg" alt="шкаф" width="450" height="500">
        <img src="pics/photos/21.jpg" alt="полка" width="450" height="500">
        <img src="pics/photos/22.jpg" alt="шкаф" width="450" height="500">
        <img src="pics/photos/24.jpg" alt="диван и стулья" width="450" height="500">
        <img src="pics/photos/26.jpg" alt="шкаф" width="450" height="500">
        <img src="pics/photos/27.jpg" alt="photo" width="450" height="500">
        <img src="pics/photos/28.jpg" alt="кухня" width="450" height="500">
        <img src="pics/photos/29.jpg" alt="полка настенная" width="450" height="500">
        <img src="pics/photos/30.jpg" alt="кухонный гарнитур" width="450" height="500">
        <img src="pics/photos/31.jpg" alt="столик деревянный" width="450" height="500">
        <img src="pics/photos/32.jpg" alt="мебель в магазин" width="450" height="500">
        <img src="pics/photos/33.jpg" alt="мебель в магазин" width="450" height="500">
        <img src="pics/photos/34.jpg" alt="шкаф-купе" width="450" height="500">
        <img src="pics/photos/35.jpg" alt="шкаф" width="450" height="500">
        <img src="pics/photos/36.jpg" alt="шкаф" width="450" height="500">
    </div>
    
    <div class="goTopLink">
             <a href="#top" id="goTop">Наверх</a>
    </div>
    <a name="bottom"></a>
    <div class="footer">
        <p>Copyright</p>
        <p class="small">Разработчик сайта - тот-то тот-то</p>
        <p class="small">Icons made by <a href="https://www.flaticon.com/authors/vectors-market" title="Vectors Market">Vectors Market</a> from <a href="https://www.flaticon.com/" title="Flaticon">www.flaticon.com</a> is licensed by <a href="http://creativecommons.org/licenses/by/3.0/" title="Creative Commons BY 3.0" target="_blank">CC 3.0 BY</a></p>
    </div>
    
    <script src="js/lightbox.js"></script>
    <script src="js/autoshow.js"></script>
    <script src="js/smoothScroll.js"></script>
</body>
  • Вопрос задан
  • 194 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 1
SeokkyN
@SeokkyN Автор вопроса
Чёрт, как всегда. Написал вопрос, и тут же понял в чем дело.
var target = $('.small');
    var targetPos = target.offset().top;
    var winHeight = $(window).height();
    var scrollToElem = targetPos - winHeight;
    $(window).scroll(function(){
        var winScrollTop = $(this).scrollTop();
        if(winScrollTop > scrollToElem){
            stopper.hide();
            $('html,body').stop();
        }
});

Вот в этом куске кода предпоследняя строка блочит работу ссылки. При каждом нажатии происходит скролл где-то на 1px вверх, а когда вот это if(winScrollTop > scrollToElem) условие становится ложным (кликов через 20), тогда кнопка скроллит к самому верху страницы. Осталось придумать, как справиться с этим, но это уже не такой неясный вопрос.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы