Problems smooth scrolling to particular div
-
20-12-2019 - |
Domanda
In my dropdown menu, I have 2 links, which when clicked on are supposed to take (smooth scroll either up or down - depending on which part of the page the user's on) the user to the corresponding section on the page.
The only problem: nothing works.
HTML:
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class = "dropdown active">
<a href = "#" class = "dropdown-toggle" data-toggle = "dropdown"><span>Dropdown</span><b class = "caret"></b></a>
<ul class = "dropdown-menu">
<li><a href = "#subtab1">Subtab1</a></li>
<li><a href = "#subtab2">Subtab2</a></li>
</ul><!-- END: "dropdown-menu" -->
</li><!-- END: "dropdown" -->
</ul><!-- END: "collapse navbar-collapse navHeaderCollapse" -->
</div><!-- END: "container" -->
</div><!-- END: "container" -->
</div><!-- END: "navbar navbar-inverse navbar-fixed-top" -->
<div class="container pad-container">
<div id = "subtab1">
<h1>Subtab1</h1>
<p>stuff...</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
</div>
<div id = "subtab2">
<h1>Subtab2</h1>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
<p>lorem lorem</p>
</div>
</div>
CSS:
.pad-container{
padding-top:80px;
padding-bottom:80px; /*height of the footer plus a little */
}
JS:
$( ".dropdown-menu > li > a" ).click(function() {
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top - navHeight }, 750);
});
Soluzione
$( ".dropdown-menu > li > a" ).click(function (event) {
event.preventDefault();
$('html,body').animate({ scrollTop: $($(this).attr("href")).offset().top}, 750);
});
you might also want to try doing $(document).animate( ... )
or limit to html
or body
to test. I removed the navHeight
var for now.
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow