Page scroll to the bottom of a div
Question
How do I align the bottom of a div to the bottom of my page on a button click? Similar to using something like window.location.href = '#Div1' to align the screen to the top of ' Div1 '
<html>
<head>
</head>
<body>
<div id="Div1" style="border: 1px solid #cccccc; position: absolute; background: #FA8258"
onclick="window.location.href='#Div2'">
This is Div Orange. Click to see Div Yellow.
</div>
<div id="Div2" style="border: 1px solid #cccccc; position: absolute; top: 800px;
background: #F4FA58" onclick="window.location.href='#Div3'">
This is Div Yellow. Click to see Div Blue. But I want this div to be at the bottom
instead of top on click of Div Orange.
</div>
<div id="Div3" style="border: 1px solid #cccccc; position: absolute; top: 1600px;
background: #A9F5E1;" onclick="window.location.href='#Div1'">
This is Div Blue. Click to see Div Orange.
</div>
</body>
</html>
3 answers
solution1
0 2015-07-02 07:46:57
Have you tried window.scrollTo ?
window.scrollTo(500, 0);
In place of 500, provide the div top coordinate :
window.scrollTo( document.getElementById('yourDivId').offsetTop() , 0);
solution2
0 ACCPTED 2015-07-02 08:17:33
I think this will do the job for you. This is assuming that you are wanting to scroll in the body. $(window).height() refers to the viewport height.
function jumpBottom(from, id) { var to = document.getElementById(id); document.body.scrollTop = to.offsetTop - $(window).height() + to.offsetHeight; }
<div id="Div1" style="border: 1px solid #cccccc; position: absolute; background: #FA8258" onclick="jumpBottom(this,'Div2')"> This is Div Orange. Click to see Div yellow. </div> <div id="Div2" style="border: 1px solid #cccccc; position: absolute; top: 800px; background: #F4FA58" onclick="window.location.href='#Div3'"> This is Div Yellow. Click to see Div Blue. But I want this div to be at the bottom instead of top on click of Div Orange. </div> <div id="Div3" style="border: 1px solid #cccccc; position: absolute; top: 1600px; background: #A9F5E1;" onclick="window.location.href='#Div1'"> This is Div Blue. Click to see Div Orange. </div>
solution3
0 2015-07-02 08:20:34
Does this answer work for you? You may need to change a few parameters to make the bottom <div> peek up. Looks like a case of this:
$(document).ready(function () { $(".page").css({ height: $(window).height(), lineHeight: $(window).height() + "px" }); $("nav a").click(function () { theHref = $(this).attr("href"); $("html, body").animate({ scrollTop: $(theHref).offset().top }, 500); return false; }); });
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;} a {color: #33f; text-decoration: none;} body {overflow: hidden;} header {position: fixed; right: 0; top: 0;} header nav ul {padding: 5px; background: #ccf; border-radius: 0px 0px 0px 5px;} header nav ul li {display: inline-block;} header nav ul li a {display: block; padding: 5px; border-radius: 5px;} header nav ul li a:hover {background-color: #99f; color: #fff;} .page {text-align: center;} #page-1 {background: #99f;} #page-2 {background: #9f9;} #page-3 {background: #f99;} #page-4 {background: #9cf;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <header> <nav> <ul> <li><a href="#page-1">Page 1</a></li> <li><a href="#page-2">Page 2</a></li> <li><a href="#page-3">Page 3</a></li> <li><a href="#page-4">Page 4</a></li> </ul> </nav> </header> <section> <div class="page" id="page-1">Page 1</div> <div class="page" id="page-2">Page 2</div> <div class="page" id="page-3">Page 3</div> <div class="page" id="page-4">Page 4</div> </section>
JSBin: http://jsbin.com/rekobofami , http://output.jsbin.com/rekobofami
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.