页面滚动到底部 div

Question

如何在单击按钮时将 div 的底部与页面底部对齐？类似于使用 window.location.href = '#Div1' 之类的东西将屏幕对齐到“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>

Answer 1

你试过了吗window.scrollTo？

window.scrollTo(500, 0);

代替 500，提供 div 顶部坐标：

window.scrollTo( document.getElementById('yourDivId').offsetTop() , 0);

Answer 2

我认为这会为您完成工作。这是假设您想要在正文中滚动。 $(window).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>

Answer 3

这个答案对你有用吗？您可能需要更改一些参数才能使底部 <div> 向上看。看起来像这样的情况：

$(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

页面滚动到底部 div

Page scroll to the bottom of a div

html

javascript

css

scroll

window.location