Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
cleo inacio
169 PointsHow 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');
}
});
```