2013-12-11 4 views
0

Я отказался от этого, казалось бы, сделал все и следил практически за каждой ссылкой в ​​интернете, ища исправления, но безрезультатно.Javascript scrollTo только срабатывает при полной перезагрузке страницы

Я использую плагин jquery scrollTo() и localScroll() для анимации прокрутки на нескольких страницах моего сайта на якоря/id. Проблема в том, что она только прокручивается с анимацией, когда страница либо полностью перезагружается в браузере, либо просматривается напрямую через ее URL-адрес (так же, как полная перезагрузка). Если вы следуете ссылке на страницу с помощью навигации, scrollTo(), плагин не работает, и вместо этого это переход к якорям (поведение по умолчанию).

$(document).ready(function(){ 
$('.home .col-xs-6').localScroll(); 
    $('.tour .btn-group').localScroll(); 
}); 

Javascript загружается в файл, который появляется в голове (я проверил), и я также попытался поставить выше код непосредственно на странице, где .btn-групповые ссылки являются, но он по-прежнему работает только каждый раз при полном обновлении браузера, и, как я уже сказал, когда вы переходите на страницу, содержащую вышеуказанный код, используя навигацию по сайту, она возвращается к поведению по умолчанию.

Я также попытался изменить функцию ready на on('load'), который ничего не сделал, и я включил preventDefault();, который также ничего не помог.

Это кажется таким простым, но я не могу заставить его работать правильно!

+0

Эта проблема заключается в том, что у вас есть хэш в вашем URL-адресе, например 'yourwebsite.com/coolpage # thispart'? Или даже если вы используете обычный URL-адрес, например 'yourwebsite.com/othercoolpage' – RustyToms

+0

@RustyToms, проблема возникает даже тогда, когда URL-адрес находится на корневом уровне, с или без привязки #hash в конце. Я думаю, что на самом деле это имеет какое-то отношение к турболинкам в рельсах, я смотрю на это. –

ответ

0

Так что я в конечном итоге покончив с плагинами compeletely и пошел с этим решением ниже:

$(document).on('page:load', function() { 
$(".scroll").click(function(event){ 
     event.preventDefault(); 
     //calculate destination place 
     var dest=0; 
     if($(this.hash).offset().top > $(document).height()-$(window).height()){ 
       dest=$(document).height()-$(window).height(); 
     }else{ 
       dest=$(this.hash).offset().top; 
     } 
     //go to destination 
     $('html,body').animate({scrollTop:dest}, 1500,'swing'); 
    }); 
}); 

, который работает. Мне просто нужно добавить scroll в класс ссылок. Я считаю, что часть проблемы связана с камнем turbolinks в рельсах, поэтому я добавил функцию page:load, которая заставила ее работать. К сожалению, даже с добавленной функцией у localScroll() все еще были проблемы, но похоже, что это работает так же хорошо.

Смежные вопросы