Member Avatar for NoGood

Hi

I need some help :s

I have a form on my web page and when you submit it via clicking submit button it refreshes the page and shows a table of results below the form.

When the page refreshes the user has to scroll down to see the table is there anyway that the page can refresh and start at below the form?

Any advice is great :)

  • 2 Contributors
  • 3 Replies
  • 82 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by NoGood

Dani AI

Generated

Good call by — fragment navigation is the simplest approach. For modern HTML use an element with an id at the results spot (the old name attribute on anchors is obsolete), and let the browser jump to that fragment after the page reloads. Fragments are handled client-side (they are not sent to the server), so the matching element must actually be present in the returned HTML Location.hash.

If the jump is flaky (large images, layout shifts, or async content), trigger a scroll and set focus after the page finishes loading. Adding tabindex="-1" to the results container improves accessibility when you programmatically focus it. Example:

<div id="results" tabindex="-1">...results...</div>

<script>
window.addEventListener('load', function () {
  var id = (window.location.hash || '').substring(1);
  if (!id) return;
  var el = document.getElementById(id);
  if (el) {
    el.focus();
    if (el.scrollIntoView) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
});
</script>

Alternatives: submit via AJAX and inject the table, then call scrollIntoView() immediately; or ensure your server returns the results container (with the right id) so a fragment link reliably lands there. See Element.scrollIntoView for options and fallbacks Element.scrollIntoView.

Recommended Answers

All 3 Replies

Member Avatar for NoGood

I have tried this but it doesnt work

<form action="pageName.php#bottom">
Edited by mike_2000_17 because: Fixed formatting
Member Avatar for buddylee17

You're on the right track. You'll need to create an anchor for the page to go to.

In the html where you want the page to scroll to, add <a name="bottom"></a> The page should scroll to here after submit.

Member Avatar for NoGood

Ah thanks that works perfectly - cheers :)

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.