Twitter Bootstrap Tabs: How to jump to anchor?

Question

I would like the page to jump to the "tabreveal" ID when a View details button is clicked. What JS would I need to make this happen? Code is as follows: ```

Web

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Video

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

View details »

Print

Donec sed odio dui. Cras justo odio, dapibus ac facil…

Accepted Answer

The Tab Data API uses `preventDefault()`, which is why the browser doesn't scroll to the panes. (See source code.)

The simplest thing to do would probably be to disable the event listener defined in Tab code, and then make your own without the call to `preventDefault()`.

Something like:

```
// disable old listener
$('body').off('click.tab.data-api')

// attach new listener
$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  //e.preventDefault()
  $(this).tab('show')
})
```

If you only wanted certain tabs to trigger a browser scroll, you could add some conditional statements in here to control whether or not `preventDefault()` is called.

Finally, make sure these overrides run after the tab plugin has been loaded.

Viewport Conditional

If you want to check the viewport and decide whether to scroll based on its width, you could try:

```
$('body').on('click.scrolling-tabs', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
  $(window).width() > 767 && e.preventDefault()
  $(this).tab('show')
})
```

In Bootstrap, 767 px is considered the upper limit of a "phone" viewport, but you can use whatever value you'd like.

Twitter Bootstrap Tabs: How to jump to anchor?

Solution

Problem