Good DayI have 3 toggle buttons, that shows/hide 3 divs:ISSUE: Whenever I click any of the buttons, the page scrolls up, but not to the top...It is very annoying since it directs the users focus away from the toggled content...I don't think it is the href="http://stackoverflow.com/questions/15524565/#" since I did specify bookmarks for them...Note that the last two divs has the same amount of content, but the first one has a bit less...Why is the viewport shifting upward everytime I click the buttons?What is the best way to fix it?\[code\] <div id="featuredToggle"> <ul> <li><a class="latestClick clickedStyle" href="http://stackoverflow.com/questions/15524565/#latestInner">Latest</a></li> <li><a class="make" href="http://stackoverflow.com/questions/15524565/#make">Make</a></li> <li><a class="models" href="http://stackoverflow.com/questions/15524565/#models">Models</a></li> </ul> </div> <div id="latestInner"> content here </div> <div id="make"> content </div> <div id="models"> content </div>\[/code\]JS:\[code\] $(document).ready(function() { $('#make').hide(50); $('#models').hide(50); $('#featuredToggle ul li a').click(function (e) { e.preventDefault(); if ($(this).hasClass('latestClick')) { $('#featuredToggle ul li a.make').removeClass('clickedStyle'); $('#featuredToggle ul li a.models').removeClass('clickedStyle'); $(this).addClass('clickedStyle'); $('#make').hide(200); $('#models').hide(200); $('#latestInner').show(500); } else if ($(this).hasClass('make')) { $('#featuredToggle ul li a.latestClick').removeClass('clickedStyle'); $('#featuredToggle ul li a.models').removeClass('clickedStyle'); $(this).addClass('clickedStyle'); $('#latestInner').hide(200); $('#models').hide(200); $('#make').show(500); } else if ($(this).hasClass('models')) { $('#featuredToggle ul li a.latestClick').removeClass('clickedStyle'); $('#featuredToggle ul li a.make').removeClass('clickedStyle'); $(this).addClass('clickedStyle'); $('#latestInner').hide(200); $('#make').hide(200); $('#models').show(500); } }); });\[/code\]Thank you!