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()指的是视口高度。

＆＃13;

function jumpBottom(from, id) {
    var to = document.getElementById(id);
    document.body.scrollTop = to.offsetTop - $(window).height() + to.offsetHeight;
}

＆＃13;

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

＆＃13;

Answer 3

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

＆＃13;

$(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;
  });
});

＆＃13;

* {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;}

＆＃13;

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

＆＃13;

JSBin：http://jsbin.com/rekobofami，http://output.jsbin.com/rekobofami

页面滚动到div的底部

3 个答案: