scroll to elements inside a div with fixed height

Question

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

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

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?

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.

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.

Any help is appreciated! Thanks in advance.

score 2 · Answer 1 · edited May 23 '17 at 12:31

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.

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

edited May 23 '17 at 12:31

Community

1
1

answered Feb 22 '16 at 23:53

Jerry

492
3
11

rphv · Accepted Answer · 2016-02-23T22:13:45.410

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.

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.

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

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:

Trying to adapt your sample in my real environment, I have the problem that there is always a constent wrong offset added to the scroll position - i.e. it scrolles too far. So can you explain why you do `.scrollTop(... -targetElem.height() * 3)` in your sample? And why `*3`? — badera, Feb 23 '16 at 21:12
I got the `* 3` with trial-and-error :) However, in this case I think it's the result of the `form` height + the line of text `Enter a numeric ID:` + the height of the element you're scrolling to. In this case those three values happen to be close to equal. I modified the example so you just have to correct for the height of the element. — rphv, Feb 23 '16 at 22:16

scroll to elements inside a div with fixed height

2 Answers2