I am looking to implement a functionality where the page scrolls to the top of the navigation div ID when a link inside the navigation div is clicked, or ideally even when clicking anywhere within the div itself that contains the navigation links.
After researching this issue, I found jQuery - How to scroll an anchor to the top of the page when clicked?, but for some reason, it does not work in my specific example. What could be the problem?
I am still new to jQuery and have average knowledge of HTML and CSS. I used inline styling for the divs to avoid creating a separate CSS file just for this example.
Even after loading the HTML and script as per the instructions from jQuery - How to scroll an anchor to the top of the page when clicked? in Aptana, the scroll does not work. I even tried inserting a content div above the div class to ensure there is space to scroll to, but still no luck.
To make things clearer, I added two short paragraphs inside the respective divs to explain the exact scenario I am facing.
Your assistance with this issue would be greatly appreciated. Thank you.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('#scroll_navigation ul li').click(function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 800);
});
</script>
<body>
<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>
<div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">
<p>Scroll navigation to top of page</p>
<p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>
<div id="navigation">
<div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">
<ul>
<p>Catch clicks on anchors to scroll the div id to the top of the page</p>
<li><a href="#Portfolio" title="">Portfolio</a></li>
<li><a href="#Services" title="">Services</a></li>
<li><a href="#About" title="">About</a></li>
<li><a href="#Contact" title="">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>
</body>
EDIT Please note the issue regarding scrollTop in Firefox. Animate scrollTop not working in firefox jQuery scrollTop - no support for negative values in Mozilla / Firefox It took me some time to realize that my code was correct, but the scrollTop feature was causing the problem in Firefox. The same behavior can also be observed in this example. When scrolling down and fixing the anchors, Firefox may scroll up to random positions either before or after the target div by a few pixels.
To achieve precise scrolling across different browsers, I am now using Scrolld.js. It's fascinating how various browser engines interpret something as common as scrollTop differently based on html or body inputs. As someone new to jQuery, I believe this emphasizes the differences in browser rendering rather than any shortcomings of jQuery itself.