У меня проблема с гладкой прокруткой jQuery. У меня есть onepager, на котором я бы хотел прокрутить до разных DIVs через привязки. Нельзя прокручивать вручную с одного DIV на другой. Чтобы подойти к этому, я отключу прокрутку на всей странице, но верну ее в нормальное состояние в течение определенного периода времени, нажимая на мои кнопки меню.jQuery Smooth Scroll - прокрутка только после работы
Он работает следующим образом: как только вы войдете на сайт, вы увидите мой первый DIV с контентом. Когда вы кликаете по ссылке в меню, вы видите короткую анимацию, в которой изображение выходит из DIV, а страница прокручивается до следующего DIV. Во втором DIV изображение анимируется, и текст прокручивается. В первый раз, когда он работает, но когда я хотел бы щелкнуть по другой ссылке, прокрутка работает, но через одну секунду в правом DIV страница перескакивает назад (в первый DIV).
Я уже пытался решить это с помощью event.preventDefault(); и return false, но тем не менее он прыгает на вершину.
Может ли кто-нибудь мне помочь?
var scrollPosition = [
self.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft,
self.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
];
var html = jQuery('html, body'); // it would make more sense to apply this to body, but IE7 won't have that
html.data('scroll-position', scrollPosition);
html.data('previous-overflow', html.css('overflow'));
html.css('overflow', 'hidden');
window.scrollTo(scrollPosition[0], scrollPosition[1]);
\t
\t
$(function() {
$('a[href*=#]:not([href=#])').on('click', function(event) {
\t
\t event.preventDefault();
\t var html = jQuery('html, body');
var scrollPosition = html.data('scroll-position');
html.css('overflow', html.data('previous-overflow'));
window.scrollTo(scrollPosition[0], scrollPosition[1])
\t
var href = $(this).attr('href');
\t
\t
\t
\t setTimeout(function() {
\t \t
\t $('html, body').stop().animate({
scrollTop: $(href).offset().top
}, 1500, 'easeInExpo');
\t
\t
\t }, 900);
\t
\t
\t
\t setTimeout(function() {
\t \t
\t $('body').css('overflow', 'hidden');
\t $('html').css('overflow', 'hidden');
\t
\t
\t }, 4000);
\t
\t
});
});<div id="page-one"></div>
<div id="pageone">
<!-- some content -->
</div>
<div id="page-two"></div>
<div id="pagetwo">
<!-- some content -->
</div>
<div id="page-three"></div>
<div id="pagethree">
<!-- some content -->
</div>
Вы могли бы создать скрипку? –
Боюсь, что нет. Я использую WordPress и не знаю, как связать изображения и так далее. Это только локально. – Kelli