Scroll to div smoothy after page load and not directly
Question
I have a php page and I am trying to scroll user to section automatically after entire page is loaded. Right now it takes directly to that section on page load, I want entire page to be loaded and then scroll the page to that div. What I am doing is.
<script type="text/javascript">
<!--
function gotoit()
{
window.location="#gohere";
}
//-->
</script>
<body onload="gotoit()">
some code here
<a name="gohere"><div class="I want to scroll to this div"></a>
Please help me what should I do to scroll smoothly to that section automatically after page load.
2 answers
solution1
3 2013-09-05 23:21:18
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(window).load(function() {
var theHash = "#go-here";
$("html, body").animate({scrollTop:$(theHash).offset().top}, 800);
});
</script>
</head>
<body>
<p>Lots of content here...</p>
<p>More content...</p>
<p>etc...</p>
<p id="go-here">Scroll down to here automagically</p>
<p>Some more content</p>
</body>
</html>
$(window).load() ensures the page starts to scroll after all your other assets have loaded (images, for example).
solution2
0 2013-09-05 22:32:54
Here is a jQuery function I use to achieve this:
function scrollToStart(){
$("#scrollToStart").click(function (){
$('html, body').animate({
scrollTop: $("#startHere").offset().top
}, 2000);
});
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.