1

I put together a single-page site following this tutorial: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

Every slide on the page has a data-slide attribute, to which the page scrolls when the corresponding link in the navigation is clicked. This works fine.

The problem is: I also got subpages which include the same navigation, so when you click a navigation link on one of the subpages, it should redirect to the main page and then scroll to the div with the data-slide attribute of the clicked navigation link.

Unfortunately I'm pretty new to JavaScript.

How can I achieve this? Here is the code for the scrolling function:

//Create a function that will be passed a slide number and then will scroll to that slide using jQuery's animate. The jQuery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available through the plugin.
function goToByScroll(dataslide) {
    htmlbody.animate({ scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top}, 2000, 'easeInOutQuint', function () {
        $('.nav li').removeClass('active');
        $('.nav li[data-slide="' + dataslide + '"]').addClass('active');
    });
};
//When the user clicks on the navigation links, get the data-slide attribute value of the link and pass that variable to the `goToByScroll` function
links.click(function (e) {
    e.preventDefault();
    dataslide = $(this).attr('data-slide');
    goToByScroll(dataslide);
});
4

0 に答える 0