在另一页上滚动到带有数据幻灯片属性的div

时间:2013-10-21 15:11:07

标签: javascript jquery parallax scrolltop jquery-waypoints

按照本教程,我将单页网站放在一起: http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/

页面上的每张幻灯片都有一个数据幻灯片属性,当点击导航中的相应链接时,页面会滚动到该属性。这很好。

问题是:我还有包含相同导航的子页面,因此当您单击其中一个子页面上的导航链接时,它应该重定向到主页面,然后滚动到具有data-slide属性的div。点击的导航链接。

不幸的是我对javascript很新。

我怎样才能做到这一点? 以下是滚动功能的代码:

//Create a function that will be passed a slide number and then will scroll to that slide using jquerys animate. The Jquery
//easing plugin is also used, so we passed in the easing method of 'easeInOutQuint' which is available throught 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);
});

0 个答案:

没有答案