jquery-scrollto | jQuery ScrollTo - Smooth Scrolling to any jQuery/DOM Element | Plugin library

I was looking into this now myself and it turns out there is simply an argument in the navbarPage() function that will do this for you:

This is intended.

What you experience here is a feature of Bootstrap, the responsive breakpoint. In its edge case: There is a minimum width for which all containers will span over the whole page. This is done mainly for websites to become mobile friendly, since i.e. a column that spans over a third of the device gets very narrow and can become really hard to read. And therefore it is intended, that "columns" get disbanded at a certain point.

If you really dont want this to happen, you have two options.

Either, knowing that this happens with bootstrap, you refrain from using columns and specify the div width youself, such that it is fixed no matter what.

Or you try to counter act the bootstrap css by including another style sheet. You can look through the bootstrap.css for media queries that are responsible for the breaks. And then copy the styles and apply them to the very small screen sizes. I took the liberty to create a css that would be sufficient for your cases, posted below:

The problem is that the .left offset that jQuery was tracking was relative to the container, so it degraded as the element moved.

A better way would be to use the native JavaScript property for the element, offsetLeft^MDN.

For example:

You can just add external (from the outside) resources like so:

Omg ok so I figured it out.

Because I'm using the responsive tabs jquery plugin, I was targeting the wrong element. Firefox window was less than 991px so appeared to be working, chrome window was > 991 so appeared to not be working.

This is how I fixed it.