Rubix_Revenge Rubix_Revenge - 2 months ago 4x
HTML Question

How to load webpage to anchor location without "jerking" or "jumping"

I am developing an MVC website and am noticing a pattern, now that I am using anchors. Looking for jquery "Smooth Scrolling" doesn't appear to be solution because I don't need "smooth scrolling" -- I need the page instantly load at the anchor designated in the URL without starting at the top. I have looked at even the most basic jQuery

function, and I still have the symptom.

When I navigate to a page with use of an anchor, e.g.,
, I see the page flicker for maybe 0.5 seconds and then jump to the correct location.

Is there a technique, whether by a Controller Action technique or a jQuery technique, where the page renders at the anchor location rather than first loading at the top and then jumping to the anchor?

To clarify, there are two possible conditions:

  1. There is an anchor defined in the URL

  2. NULL Case: There is no anchor defined in the URL

If there is no anchor in the URL, then the page would load at the top normally happens. However, if there is an anchor in the URL, then I need the page to render at that anchor location.


You can use the offest() method, something like this

<div id="aboutUs">
      About us content...


<div id="section">

And the JS

$(function() {
    $(document).scrollTop( $("#section").offset().top);

To get the hash from the URL automatically

var url = window.location.href;
var hash = url.substring(url.indexOf('#'));