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.

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.

• javascript
• angularjs
• html

Share Improve this question Follow asked Feb 22, 2016 at 21:34 baderabadera 1,55522 gold badges2727 silver badges5252 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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./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./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:

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./a/5267018/5797159