I am currently developing a timeline page and I want to implement a feature similar to the chronological list of years displayed on the right side of this webpage:
As part of this feature, I have set up a click event which adds a circle border around the selected date and removes it when another date is chosen. Additionally, using this viewport plugin, the page is configured to show the circle border around the year/date that is currently visible on the screen.
However, I am encountering an issue where clicking on a specific year triggers the scroll function, causing the circle border to appear and disappear for each year in the list until reaching the desired year. Essentially, the click action is also initiating the scroll function.
My objective is to prevent the scroll function from triggering when a user clicks on a year, and then resume once the page has scrolled to the correct position. Any suggestions or recommendations on how to achieve this would be highly appreciated!
Below is the script for the scroll function:
$(window).scroll(function (){
if($("#intro:in-viewport").length > 0){
$('.tNavIntro').css({border: '2px solid #50b855'});
$('.tNav2012').css({border: ''});
}
// Other conditions for different years go here...
});
And here is the click function:
$('.timeLineNavWrap div').on('click', function(){
$('div.selected').removeClass('selected');
$(this).addClass('selected');
});
Lastly, I added the following line of code as a workaround to remove the #links from anchors in the URL when a link is clicked:
$(document).ready(function(){
$('.link').on('click',function (e) {
$('html, body').stop().animate({
'scrollTop': $($(this).attr('rel')).offset().top
}, 900, 'swing', function () {
clicked = false;
});
});
});