Member Avatar for Sailor_Jerry

I am using Ajax to load the content of a div element. I have a call back function that I want to use to scroll to the appropriate element, after the data has been loaded.
I also have the id of the element I want to scroll to.

Most of the documentation I have seen talk about the widnow.scrollTo() function.

Does anyone know how to get this to work within a div with a vertical scrollbar.

  • 2 Contributors
  • 2 Replies
  • 262 Views
  • 7 Years Discussion Span
  • Latest Post Latest Post by vinhsoft

Dani AI

Generated

and are on the right track — you do need to move the scroll position of the scrollable container so the target sits where you want it — but that one-liner can be brittle. Problems show up when the target is nested, when images or other content change layout after the AJAX insert, or when CSS (transforms, positioned ancestors) affects offsets. The two approaches below are more robust.

A simple, modern option: use the element API that scrolls the nearest scrollable ancestor for you. It also supports smooth scrolling in current browsers:

targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });

If this scrolls the whole page instead of the inner div, check that the div is actually the nearest scrollable ancestor (it needs a fixed height and overflow: auto/scroll).

If you want precise control or need compatibility, compute a delta and adjust the container's scrollTop. Using getBoundingClientRect avoids most offsetParent pitfalls:

var container = document.getElementById('containerId');
var target = document.getElementById('targetId');
var cRect = container.getBoundingClientRect();
var tRect = target.getBoundingClientRect();
container.scrollTop += tRect.top - cRect.top;

For cases where you prefer offset accumulation, use a small helper that walks offsetParent until the container and returns null if the target isn't inside the container:

function relativeTop(el, ancestor) {
  var y = 0;
  while (el && el !== ancestor) { y += el.offsetTop; el = el.offsetParent; }
  return el === ancestor ? y : null;
}
var y = relativeTop(target, container);
if (y !== null) container.scrollTop = y;

Practical tips: run the scroll code after the AJAX HTML is inserted and layout is stable (use requestAnimationFrame, a small setTimeout, or wait for images to load). Verify the container has overflow-y and a set height. If CSS transforms or fixed positioning are in play, prefer getBoundingClientRect or scrollIntoView — they handle more edge cases than a raw offsetTop read.

Member Avatar for Sailor_Jerry

Got this to work.
Step 1. Get the offsetTop amount of the element you want to scroll to.
Step 2. Set this equal to the scrollTop size of the container, in my case a div.

document.getElementById('id').scrollTop = document.getElementById('id').offsetTop;
Member Avatar for vinhsoft

Got this to work.
Step 1. Get the offsetTop amount of the element you want to scroll to.
Step 2. Set this equal to the scrollTop size of the container, in my case a div.

Edited by JorgeM because: Please no self promoting in your posts. Use the signature tool in your profile instead. future occurrences will result in infraction points.
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.