0

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 $("#").scroll() function, and I still have the symptom.

When I navigate to a page with use of an anchor, e.g., http://localhost:59334/Applicants/ApplicantBaseContactHistories?page=10&SelectedCampus=CRA#Paging, 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.

  • This is likely due to the page loading, then going to the element with that anchor... That's how anchors work. There are a veritable cornucopia of solutions out there. Just search for "jquery scrolling plugin" and scroll through the thousands of hits. – Heretic Monkey Aug 03 '16 at 21:30
  • Possible duplicate of [How to disable anchor "jump" when loading a page?](http://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page) – Heretic Monkey Aug 03 '16 at 21:48
  • It's not a duplicate. And the symptom isn't going away -- this particular category of page is on a live server with a database query. And the "answer" of that page doesn't help me. –  Aug 03 '16 at 22:16

1 Answers1

1

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

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

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id="section">
    content...
</div>

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('#'));
Halnex
  • 4,242
  • 12
  • 49
  • 102
  • How would I apply this technique when the anchor is in the URL? What i see looks like a "hard code" method. I'd like the page to load at whatever anchor is in the URL. –  Aug 03 '16 at 20:45
  • I tried this: '$(function () { var hash = window.location.hash; $(document).scrollTop($(hash).offset().bottom); });' and I'm still getting the flickering effect. –  Aug 03 '16 at 20:54
  • I don't see a relation between the hash block and the scrollTop function. –  Aug 03 '16 at 21:30
  • This won't work any better, because the browser itself is doing the movement to the anchor, previous to document.ready. This would cause the page to scroll to the anchor twice, or not at all (depending on a number of factors). – Heretic Monkey Aug 03 '16 at 21:32
  • @Rubix_Revenge replace `$("#section")` with `$(hash)`. @Mike McCaughan I am testing this locally so the delay is virtually non-existent, maybe if it was up on a live server, you would notice that it is not working the way OP wants it to. – Halnex Aug 03 '16 at 21:43
  • @MikeMcCaughan what if he used `$(window).load(function()` ? – Halnex Aug 03 '16 at 21:44
  • 1
    Not much difference. Take a look at the duplicate. You'd want a timeout or animation to take care of the lag. – Heretic Monkey Aug 03 '16 at 21:49