将垂直滚动条位置修复为div中的第二行（cshtml）？

Question

我有一个带滚动条的div，显示15个月，每行最少3个，当页面加载时我想将滚动条位置固定到第2行，如我的屏幕截图所示。在滚动条中应该如此固定到我的屏幕截图中显示的位置而不是div的顶部。此要求的原因是我们显示前3个月，但用户应该看到页面加载时的当前月份。我希望我已经明确

我正在使用

<div id="key_dates" style ="overflow:scroll;width:960px;height:500px">

你能帮忙吗？

谢谢， 阿达什讷

Answer 1

您需要使用JavaScript：

<!-- 
     Place this script before closing </body> tag so that
     DOM (HTML elements tree) is already built when the script is running 
-->
<script>
// create a closure to not pollute global scope
!function () {
  // cache reference to keyDates element
  var keyDates = document.getElementById('key_dates');
  // set scroll to the height of one row
  keyDates.scrollTop = 150; // substitute `150` with height of one row
} ();
<script>

Here是element.scrollTop

的文档

如果您使用的是jQuery，那么就这样做（here是文档）;

<script>
$('#key_dates').scrollTop( 150 );
</script>

jQuery的示例：http://jsfiddle.net/gryzzly/CjdwX/

Answer 2

似乎我无法用jsfiddle正确演示这一点，但如果你在浏览器中测试它，here is a sample of code就可以了。使用每行上的锚点，我们可以使用href或url将窗口锚定到指定位置。

例如，如果您在www.address.tld/calendar处实施此代码，要显示第二行，则输入www.address.tld/calendar#row2。

您只能在第二行使用锚点，您可以根据需要以静态或编程方式放置它。这是一个非常直接的解决方案，但是有些人不喜欢网址中的哈希和锚名称。它并没有打扰我。