Question

我正在使用Bootstrap中的页面布局，其中有一个侧栏列和一个内容列。我将这两列设置为height:100%;和overflow:auto;，以便侧栏保持原位，同时可以滚动内容列。

我想在点击链接时添加一些jQuery以滚动到内容列中的某些区域，但由于overflow:auto;

，我通常用于此的脚本无效

这是我的剧本：

function scrollToLink(id){
  $('html, body').animate({
    scrollTop: $("#"+id).offset().top
  }, 2000);
}

$(function() {
  $("#sidebar a").click(function(e) {
    e.preventDefault();
    scrollToLink(this.href.split("#")[1]);  
  });
});

here is the Bootply link

要查看我要使用的效果，请从column元素中删除height类（这是设置overflow和col-sm-9属性的内容），然后单击在＆＃34; Up Next＆＃34;侧栏中的链接

Answer 1

将此scrollToLink()替换为：

function scrollToLink(id){
  var target = $(window).width() > 767 ? $('#main') : $('body');
  target.animate({
    scrollTop: $("#"+id).offset().top
  }, 2000);
}

您也有一些响应问题。你应该包装＆＃34;列＆＃34;在@media (min-width: 767px)查询中布局CSS规则。

Bootstrap - 当两者都设置为溢出时仅滚动一列：auto;

1 个答案: