javascript - 单击链接以滚动到特定的 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 中设置 position: 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);
    //    });
  })