单击链接以滚动到特定的 div (jquery)

Question

当我单击一个链接并尝试滚动到具有慢速动画的特定 div 时，整个页面都会滚动而不是那个特定的 div。 我正在分享下面 plnkr 的链接，以全屏模式打开它。

http://plnkr.co/edit/5ZlY7ivJ2xwckVeyIRzO?p=preview

全屏加载

http://run.plnkr.co/HV426GUKePHeJPfS/

问题在于，当点击右侧面板中的内容时（只有推荐和 cme & Attended 才能点击），中间面板应该滚动以在顶部显示特定的 div。 相反，正在发生的事情是整个页面都在滚动，从而使 UI 没有多大用处。 我尝试使用以下两个 javascript 代码来显示一些动画并滚动 middle_profile div 或 mm div，但它们都不起作用。

用于滚动 middle_profile div

$("#bb").click(function() {
  $('.middle_profile').animate({
    scrollTop: $("#recommendationDiv").position().top
  }, 'slow');
});
$("#bb1").click(function() {
  $('.middle_profile').animate({
    scrollTop: $("#CMEDiv").offset().top
  }, 'slow');
});

用于滚动 mm div

var scrolled = 0;
$("#bb").on("click", function() {
  scrolled = scrolled - 300;
  $(".mm").animate({
    scrollTop: scrolled
  }, 50);
});

是否有另一种方法可以通过 jquery 或其他库来实现平滑滚动页面？

Answer 1

您只需将代码放入 $(document).ready() 中，并在您的 css 中设置位置：relative;顶部：0；到您的 div 中，他们将成为焦点。

  $(document).ready(function(){    
    $("#bb").click(function() {
      $('html,body').animate({
        scrollTop: $("#recommendationDiv").offset().top
      }, 'slow');
    });
    $("#bb1").click(function() {
      $('html,body').animate({
        scrollTop: $("#CMEDiv").offset().top
      }, 'slow');
    });    
    // var scrolled = 0;
    //   $("#bb").on("click" ,function(){
    //      scrolled=scrolled-300;
    //         $(".mm").animate({
    //           scrollTop:  scrolled
    //      },50);
    //    });
  })