Skip to content

Instantly share code, notes, and snippets.

@digamber89

digamber89/bootstrap-fix.html

Last active November 15, 2018 14:55
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save digamber89/ee2b9176900a3c4a70770786be1e4d75 to your computer and use it in GitHub Desktop.
Save digamber89/ee2b9176900a3c4a70770786be1e4d75 to your computer and use it in GitHub Desktop.
Download ZIP
Fix for Bootstrap scrolling to div issue.
Raw
bootstrap-fix.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Nav Example</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
#nav-container{
margin-top:40vh;
}
</style>
<!-- Latest compiled and minified JavaScript -->
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-12">
<div id="nav-container">
<!-- Nav tabs -->
<ul class="nav nav-tabs panel-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.</div>
<div role="tabpanel" class="tab-pane" id="profile">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
</div>
<div role="tabpanel" class="tab-pane" id="messages">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
</div>
<div role="tabpanel" class="tab-pane" id="settings">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi culpa dolor doloribus earum iure quia repudiandae soluta vel. Neque quam repellat sint vel vero? Aperiam at facere itaque iure ullam.</div>
</div>
</div>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
//keep outside document ready
//self calling anonymous function
(function ($) {
var jump = function (e) {
var hashvalue = '';
if (e) {
e.preventDefault();
var href = $(this).attr("href");
if (href.length != 0) {
var site_url = href.split('#')[0];
hashvalue = href.substr(href.indexOf("#"));
target = hashvalue.substr(0, hashvalue.indexOf('-'));
//site_url needs to be sent as localized value
//one drawback is the need to avoid multi hyphenated
window.location = site_url + target + '-goto';
}
} else {
//this portion works on page load to scroll to that portion
hashvalue = location.hash;
target = hashvalue.substr(0, hashvalue.indexOf('-'));
// on load of the page: switch to the currently selected tab
$('ul.nav.panel-tabs a[href="' + target + '"]').tab('show');
console.log(target);
}
if ($(target).length != 0) {
$('html,body').animate({
//offset needs to be defined
scrollTop: $(target).offset().top - 70
}, 1000, function () {
location.hash = hashvalue;
});
}
};
$(window).on('load', function (e) {
if (location.hash) {
jump();
}
});
}(jQuery));
/* requires jquery */
$(document).ready(function ($) {
// store the currently selected tab in the hash value
$("ul.nav.panel-tabs > li > a").on("shown.bs.tab", function (e) {
var id = $(e.target).attr("href").substr(1);
console.log(id);
//appended '-goto' to avoid default browser jump to div
window.location.hash = id + '-goto';
});
//$('a[href*="#"]:not([href="#"])').bind("click", jump);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment