After the automatic scroll script (ala slideshow) is triggered, the “up” button stops working, throwing it at the top anchor

S

SeokkyN2017-09-14 22:50:47

JavaScript

SeokkyN, 2017-09-14 22:50:47

After the automatic scroll script (ala slideshow) is triggered, the “up” button stops working, throwing it at the top anchor - where is the error?

Help to understand, please. I'm extremely inexperienced in JS / Jquery, so I myself can't catch up with what's wrong.

This is a script for smooth scrolling on the "up" button.

$(function(){

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

});

This is an automatic slow scroll script.

$(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();
        }
});
});
});

Here is the HTML if needed.

<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>

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

SeokkyN, 2017-09-14
@SeokkyN

Damn, as always. I wrote a question, and immediately understood what was going on.

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();
        }
});

Here in this piece of code, the penultimate line blocks the work of the link. Each click scrolls about 1px up, and when this if(winScrollTop > scrollToElem) condition becomes false (after 20 clicks), then the button scrolls to the very top of the page. It remains to figure out how to deal with this, but this is no longer such an obscure question.