通过平滑滚动到达后，抖动div

Question

我尝试通过在屏幕上平滑滚动，尽快将网页div的内容抖动到屏幕上。我有以下的html代码：

<script src="js/jquery.smooth-scroll.js"></script> 
<script src="js/jquery.min.js"></script> 
<script src="js/jquery.jrumble.1.3.js"></script> 
<ul> 
    <li><a href="#one">One</a></li> 
    <li><a href="#two">Two</a></li> 
    <li><a href="#three">Three</a><li> 
    <li><a href="#four">Four</a></li> 
</ul> 

(...) 

<article class="item" id="one"> 
    <div class="item__info"> 
    <h2>One</h2> 
    <p>Some random text here</p> 
    </div> 
    <div class="item__img"> 
    <p>Some random image here</p> 
    </div>    
</article> 

而且我可能搞砸了的东西的一部分，我的意思是Java脚本的：

<script> 
$('#stands a').on('click', function(e) { 
    var el = $(e.target.getAttribute('href')); 
    var elOffset = el.offset().top; 
    var elHeight = el.height(); 
    var windowHeight = $(window).height(); 
    var offset; 

    if (elHeight < windowHeight) { 
    offset = elOffset - ((windowHeight/2) - (elHeight/2)); 
    } 
    else { 
    offset = elOffset; 
    } 

    $.smoothScroll({ speed: 700 }, offset, 


     afterScroll: function() { 
      el.jrumble({ 
        x: 4, 
        y: 0, 
        rotation: 0 
      }); 

     } 
    }); 
    return false; 
}); 
</script> 

我试图使用jRumble剧本，我发现here。 我想达到的效果是，点击菜单中的一个链接后，整个页面向下滚动到选定的div，并振动2-3秒。我在这里做错了什么？

Answer 1

您的smoothscrolling实现中存在多个语法问题。 正如在jRumble描述的文档中，您必须在初始化元素上的插件后开始动画。

$.smoothScroll({ 
     speed: 700, 
     offset: offset, 
     afterScroll: function() { 

      el.jrumble({ //initialize the pluging 
       x: 4, 
       y: 0, 
       rotation: 0 
      }); 

      el.trigger('startRumble'); //start animation 
      var demoTimeout = setTimeout(function(){el.trigger('stopRumble');}, 1500); 
      //set Timeout for stopping the animation 

     } 
    }); 

Demo

图片的标题说明：

• 滚动可以通过jQuery的本地函数来完成animate
• 的shake效果也可以在jQuery的UI

被发现