CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
user13286
user13286

Reputation: 3075

Bootstrap - scroll only one column when both are set to overflow:auto;

I am working on a page layout in Bootstrap where I have a sidebar column and a content column. I have both columns set to height:100%; and overflow:auto; so that the sidebar stays in place while the content column can be scrolled.

I want to add some jQuery to scroll to certain areas in the content column when a link is clicked, but the script I usually use for this is not working due to the overflow:auto;

Here is my script:

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

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

And here is the Bootply link

To see the effect I am going for, remove the column class(which is what sets the height and overflow properties) from the col-sm-9 element and then click on the "Up Next" link in the sidebar

Upvotes: 1

Views: 111

Answers (1)

tao
tao

Reputation: 90003

Replace your scrollToLink() with this:

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

You also have some responsiveness issues. You should wrap the "columns" layout CSS rules in a @media (min-width: 767px) query.

Upvotes: 2

Related Questions