Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

cleo inacio
cleo inacio
169 Points

How to add 'activate scroll' to a button when going to specific page/veiw?

Iv managed to add 'no scroll' to the start button when someone enters the 'showcase' but I want to add a scroll when they press the last 'prev' button in the showcase that 'exits' back to the main view, I dont want to add it to the entire button because then it turns scroll back on at every click on the 'prev' button.

This is the code example I am using https://codyhouse.co/demo/app-introduction-template/index.html ...I am using it on a page with other content and when it enters the 'showcase' the user can scroll up and down with the buttons fixed at the bottom. Iv turned this off with the following code - $('body').css('overflow', 'hidden'); but now Im trying to add scroll on when the user clicks the last prev before the main content.

------------index.php-----------

<main class="cd-main-content">
                            <div class="cd-product-intro">
                          <h2>Connecting the vegan world!</h2>
                                <h3>Catalysing movement towards an <br>advanced society based on compassion<br> and sustainabilty.</h3>

                                <div class="cd-triggers">

                                    <a href="#cd-product-tour" class="tourbtn" id="disable" data-type="cd-tour">Start</a>
                                </div>
                            </div> <!-- cd-product-intro -->

                            <div id="cd-product-tour">
                                <ul>
                                    <li class="cd-single-item cd-active">
                                        <div class="cd-caption">
                                            <h2>What a great feature</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus praesentium, quis ab iusto possimus quaerat perspiciatis voluptas obcaecati ipsam autem.
                                            </p>
                                        </div>
                                        <div class="cd-image-container">
                                            <div>
                                                <div class="cd-phone-frame"></div>
                                                <div class="cd-image-wrapper">
                                                    <img src="<?php bloginfo('template_url'); ?>/img/screen-1.png" alt="Screen Preview 1">
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li class="cd-single-item cd-not-visible cd-move-right">
                                        <div class="cd-caption">
                                            <h2>This one is even better</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus praesentium, quis ab iusto possimus quaerat perspiciatis voluptas obcaecati ipsam autem.
                                            </p>
                                        </div>
                                        <div class="cd-image-container">
                                            <div>
                                                <div class="cd-phone-frame"></div>
                                                <div class="cd-image-wrapper">
                                                    <img src="<?php bloginfo('template_url'); ?>/img/screen-2.png"  alt="Screen Preview 2">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                    <li class="cd-single-item cd-not-visible cd-move-right">
                                        <div class="cd-caption">
                                            <h2>Feature number 3</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus praesentium, quis ab iusto possimus quaerat perspiciatis voluptas obcaecati ipsam autem.
                                            </p>
                                        </div>
                                        <div class="cd-image-container">
                                            <div>
                                                <div class="cd-phone-frame"></div>
                                                <div class="cd-image-wrapper">
                                                    <img src="<?php bloginfo('template_url'); ?>/img/screen-3.png"  alt="Screen Preview 3">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                            <li class="cd-single-item cd-not-visible cd-move-right">
                                        <div class="cd-caption">
                                            <h2>Feature number 3</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus praesentium, quis ab iusto possimus quaerat perspiciatis voluptas obcaecati ipsam autem.
                                            </p>
                                        </div>
                                        <div class="cd-image-container">
                                            <div>
                                                <div class="cd-phone-frame"></div>
                                                <div class="cd-image-wrapper">
                                                    <img src="<?php bloginfo('template_url'); ?>/img/screen-3.png"  alt="Screen Preview 3">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                            <li class="cd-single-item cd-not-visible cd-move-right">
                                        <div class="cd-caption">
                                            <h2>Feature number 3</h2>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus praesentium, quis ab iusto possimus quaerat perspiciatis voluptas obcaecati ipsam autem.
                                            </p>
                                        </div>
                                        <div class="cd-image-container">
                                            <div>
                                                <div class="cd-phone-frame"></div>
                                                <div class="cd-image-wrapper">
                                                    <img src="<?php bloginfo('template_url'); ?>/img/screen-3.png"  alt="Screen Preview 3">
                                                </div>
                                            </div>
                                        </div>
                                    </li>

                                </ul>
                            </div> <!-- cd-product-tour -->

                            <div class="cd-slider-nav">
                                <a class="cd-prev" href="#0">Previous</a>
                                <a class="cd-next" href="#0">Next</a>
                            </div> <!-- cd-slider-nav -->

                            <div class="cd-loader"></div> <!-- top loading bar -->
                        </main>


--------custom.js----------

//on desktop, switch from product intro div to product tour div
    $('a[href="#cd-product-tour"]').on('click', function(event){
        event.preventDefault();
    $('body').css('overflow', 'hidden');
        $('header').addClass('slide-down');
        if($(window).width() < MqL) {
            $('body,html').animate({'scrollTop': $('#cd-product-tour').offset().top - 30 }, 200);
        } else {
            $('.cd-main-content').addClass('is-product-tour');
            uploadVideo(jQuery('.cd-active'));
        }
    });



    //update the slider - desktop only
    $('.cd-prev').on('click', function(event){
        event.preventDefault();

        var activeSlide = $('.cd-active');
        if(activeSlide.is(':first-child')) {
            //in this case - switch from product tour div to product intro div
            showProductIntro();
        } else {
            updateSlider(activeSlide, 'prev');
        }
    });




    $('.cd-next').on('click', function(event){
        event.preventDefault();
        var activeSlide = $('.cd-active');
        updateSlider(activeSlide, 'next');
    });

    $(document).keyup(function(event){
        if(event.which=='37' && $('.cd-main-content').hasClass('is-product-tour') ) {
            var activeSlide = $('.cd-active');
            if(activeSlide.is(':first-child')) {
                //in this case - switch from product tour div to product intro div
                showProductIntro();
            } else {
                updateSlider(activeSlide, 'prev');
            }
        } else if(event.which=='39' && $('.cd-main-content').hasClass('is-product-tour')) {
            var activeSlide = $('.cd-active');
            updateSlider(activeSlide, 'next');
        }
    });



          ```