美文网首页
JQuery之点击右边div,左边div滑动到指定位置

JQuery之点击右边div,左边div滑动到指定位置

作者: Cute_小肥鸡 | 来源:发表于2020-07-09 15:41 被阅读0次
    $(document).off("click",".J_drag_grid").on("click",".J_drag_grid",function(){
      var thisExID = $(this).attr("e_i");
    
      //添加选中样式
      $('.mdc_mrtpm_Left li.paper-section-li').removeClass("active");
      $('.mdc_mrtpm_Right .J_drag_grid').removeClass("active");
      $(this).addClass("active");
      $('.mdc_mrtpm_Left li.paper-section-li[e_i="'+thisExID+'"]').addClass("active");
    
      //获取元素距离顶部的距离,将div滑动到指定位置
      var scrollTop = $('.mdc_mrtpm_Left li.paper-section-li[e_i="'+thisExID+'"]').offset().top;
      $('.web-content').animate({
        //$('.web-content').animate({})此动画要用在有overflow-y的地方,才能起作用。
        scrollTop: scrollTop
      }, 200);
    
      //取消选中样式
      setTimeout(function(){
        $('.mdc_mrtpm_Left li.paper-section-li').removeClass("active");
        $('.mdc_mrtpm_Right .J_drag_grid').removeClass("active");
      },1000);
    });
    
    效果图

    相关文章

      网友评论

          本文标题:JQuery之点击右边div,左边div滑动到指定位置

          本文链接:https://www.haomeiwen.com/subject/mhlscktx.html