Question

我有<div>，身高固定，overflow-y: scroll。在这个div中，我主要有一个<p>标签，其中包含一些带有一些高位的长文本（带有背景颜色和编号id属性的跨度）。

顺便说一下，它是一个带有AngularJS的HTMl5应用程序。

现在我想实现一个按钮来跳过突出显示的位置：我喜欢将div滚动到正确的位置，页面的其余部分保持不变，即＆＃34;未滚动＆＃34;。如何实现div被滚动到正确的位置而不是整个页面向下滚动干扰页面布局？

原则上，我知道我可以在url中使用hashtag + id来转到具有给定id的元素 - 我也从AngularJS找到了$ anchorScroll，但它似乎不是正确的方法，因为它向下滚动整个浏览器内容，而不仅仅是在我的可滚动div中。

多年前，由于使用iframe并不难看，因此很容易使用iframe;但是，今天，我认为必须有更好的解决方案。

任何帮助表示赞赏！提前谢谢。

Answer 1

如果我愿意使用JS和JQuery，这个问题，如果我理解正确的话，已经在这里得到了回答。只需将代码建议附加到按钮上即可。

https://stackoverflow.com/a/5267018/5797159

Answer 2

这是一个可能对您有所帮助的示例。它使用jQuery在目标scrollTop上设置<div>，而无需滚动文档的其余部分。

要使用它，请在<input>字段中输入0-99之间的数字，然后点击Submit。 div应使用该数字<span>滚动到div元素的顶部（在目标id内）。

请注意，scrollTop()调用中的值会针对目标元素的高度进行更正。

for (var i = 0; i < 100; i++) {
  // http://www.paulirish.com/2009/random-hex-color-code-snippets/
  var randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
  $("#myScrollingDiv").append('<p>#' + i + ': text <span style="background-color:' + randomColor + '" id="' + i + '">text</span> text</p>')
}

$("#myForm").submit(function(event) {
  event.preventDefault();
  var idNumber = $("#idNumber").val()
  var targetElem = $("#" + idNumber);
  var targetOffset = targetElem.offset();
  var divScrollTop = $('#myScrollingDiv').scrollTop();
  $('#myScrollingDiv').scrollTop(divScrollTop + targetOffset.top - targetElem.height());
});

body {
  height: 5000px;
  overflow-y: scroll;
}
#myScrollingDiv {
  overflow-y: scroll;
  height: 100px;
  width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="myScrollingDiv"></div>
<form id="myForm">
    <input id="idNumber" type="number">
    <input type="submit">
</form>
Enter a numeric ID:

滚动到具有固定高度的div内的元素

2 个答案: