我按照本教程整理了一个单页网站: http ://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
页面上的每张幻灯片都有一个 data-slide 属性,当点击导航中的相应链接时页面会滚动到该属性。这工作正常。
问题是:我也有包含相同导航的子页面,因此当您单击其中一个子页面上的导航链接时,它应该重定向到主页,然后使用单击导航的 data-slide 属性滚动到 div关联。
不幸的是,我对 JavaScript 很陌生。
我怎样才能做到这一点?这是滚动功能的代码:
//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);
});