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

I have a <div> with a fixed height and overflow-y: scroll. Inside this div, I have primarily a <p> tag containg a long text with some highlithing (spans with background-color and a numbered id attribute).

我有一个

，有一个固定的高度和溢出:滚动。在这个div中，我主要有一个

标记，它用一些highlithing (span with background-color和编号id属性)连接一个长文本。

By the way, it is a HTMl5 application with AngularJS.

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

Now I like to implement a button to jump through the highlighted positions: I like to get the div scrolled to the right position and the rest of the page shall stay untouched i.e. "unscrolled". How can I achieve that the div is scrolled to the right position and not the whole page is scrolled down disturbing the page layout?

现在，我喜欢实现一个按钮来跳过突出显示的位置:我喜欢让div滚动到正确的位置，而页面的其余部分应该保持不变。“unscrolled”。如何实现div被滚动到正确的位置，而不是整个页面被滚动到影响页面布局的位置?

On principle, I know that I can use hashtag + id in the url to go to the element with a given id - I also found $anchorScroll from AngularJS but it seems not to be the right way, since it scrolles down the whole browser content instead of just inside my scrollable div.

原则上,我知道我可以在url中使用标签+ id去与给定id的元素——我还发现anchorScroll美元AngularJS但似乎不是正确的方式,因为它滚动下来整个浏览器的内容,而不只是在我的滚动的div。

Years ago, as using an iframe was not ugly, it was easy to use an iframe for this; however, today, I think there must be better solutions.

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

Any help is appreciated! Thanks in advance.

任何帮助都是赞赏!提前谢谢。

2 个解决方案

#1

Here's an example that might help you. It uses jQuery to set the scrollTop on a target <div> without scrolling the rest of the document.

这里有一个可能对你有帮助的例子。它使用jQuery在目标

上设置scrollTop，而无需滚动文档的其余部分。

To use it, enter a number between 0-99 in the <input> field and click Submit. The div should scroll to the top of the <span> element (within the target div) with that numeric id.

要使用它，在字段中输入一个0-99之间的数字，然后单击Submit。div应该使用这个数字id滚动到元素的顶部(在目标div中)。

Note that the value in the call to scrollTop() is corrected for the height of the target element.

注意，调用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:

#2

This question, if I understand it correctly, has been already answered here if you are willing to use JS and JQuery. Just attach the code suggestion to a button.

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

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

#1