Resetting scroll to top when clicking Home link
Question
I am setting up a web page. I am not a programmer but have been able to navigate through it with a reasonable amount of success. My problem is this - I have a portion of a web page ( a Div) that has scrollable text using the Overflow property. I am able to have the text return to the top with an anchor link to the top of the page, however when I click the link I have set up to return to "Home" it does so but does not reset the scroll bar to the top. Can someone tell me how to enable the page so I can click "Home" AND have it reset the scrollbar to the top? Thanks.
Here is the code I am using.
Anchor to top of page =
<a name="pgtop"></a>
Div referencing the anchor including styling =
<div class="rtop"><a href="#pgtop">Return To Top</a></div>
Link at bottom of page selecting "Home" - pretty standard stuff =
<div class="footerlinks"><a href="#">Home</a></div>
Thanks in advance.
3 answers
solution1
1 2014-06-23 19:46:13
Try adding a javascript click function to your link. Note my link in this sample called "scroll up". It calls a function called "scrollUp()". That function grabs your div by ID and sets the scroll to the top.
Simply add this script to your page and change the ID to match the ID of your div. Then add an "OnClick" to your anchor link. I edited the answer to match the code you posted.
<html>
<head>
<style type="text/css">
div.rtop {
width:100px;
height:100px;
overflow:scroll;
}
</style>
</head>
<body>
<a name="pgtop"></a>
<div class="rtop" id="somediv">You can use the overflow property when you want to have better control of the layout. The default value is visible.
<a href="#pgtop" onClick="scrollUp()">Return To Top</a>
</div>
</body>
</html>
<script>
function scrollUp(){
var myDiv = document.getElementById('somediv');
myDiv.scrollTop = 0;
}
</script>
solution2
1 2014-06-23 19:59:50
as i mentioned in the comment:
in your link at the bottom href="#" means current pages top (it won't slide your divs scroll - only documents scroll) ...try href="?" to reload current page or href="http://url.to.your.home.page" to put a link that loads your homepage if your current page is not a homepage which you want to navigate to.
here is some referencing document if you want to learn more
solution3
-1 2014-06-23 19:56:24
just add this jquery and you are done.
$('html, body').animate({
scrollTop: $("pgtop").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.