Question

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

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

用于全屏加载

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

问题在于，当单击右侧面板中存在的内容时（仅推荐并且cme＆amp; 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);
    //    });
  })

单击链接以滚动到特定div（jquery）

1 个答案: