2016-07-28 4 views
0

Я пытаюсь анимировать один sigle-paged-website, и когда я нажимаю на меню, оно прокручивает этот раздел, я добавил простую анимацию с постоянной скоростью, но мне нужно что-то подобное при нажатии в меню >>>http://www.sergioarantes.com/
я обнаружил, что ослабление JQuery может помочь и вот мой код JS «это не работает»Прокрутка с ослаблением jQuery

$(document).ready(function(){ 

$("#first-showup header nav .nav-bar #menu-items ul li a").click(function(){ 

var $block = $(this).data("block"); 

var $thisBlock = $("#"+$block); 


    $("html, body").animate({ 
    "scrollTop": $thisBlock.position().top }, 
      { 
       duration: 1200, 
       easing: "easeInOutExpo" 
      }); 
    }); 

на своем сайте на этой анимации они говорят, чтобы использовать эту модель:

div.animate({ top: '-=100px' }, 600, 'easeInQuart', function() { … }) 

Но Я не могу изменить его на свой код спасибо

Richard.

+0

У вас есть 'jsfiddle' или что-то, чтобы показать больше того, что происходит с вашим кодом? – tcasey

+0

вот он: https://jsfiddle.net/6ta43p1z/ –

ответ

0

Метод jQuery $(selector).animate(); требует в качестве первого параметра a Object, содержащего некоторые свойства CSS, написанные camelCase. Свойство scrollTop не является свойством CSS. В любом случае вы можете решить эту проблему, в некотором роде, как:

  • Создает функцию Javascript/JQuery, который устанавливает scrollTop свойства на документе, вы можете сделать это в основном с помощью простого window.setInterval();
  • Использовать CSS Trick (посмотрите Scroll Based Animations jQuery CSS3), чтобы сделать эффект прокрутки на странице и оживить ее.

Удачи вам!

2

Это должно работать для вас

$(document).ready(function(){ 

     $("#first-showup header nav .nav-bar #menu-items ul li a").click(function(){ 

     var $block = $(this).data("block"); 

     var $thisBlock = $("#"+$block); 

      $('html, body').animate({ 
       scrollTop: $thisBlock.offset().top 
      }, 1000); 

     }); 
    }); 
+0

[Здесь] (https://repl.it/ChIL) является рабочей демонстрацией – tcasey

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