Jump to a #anchor on page when page loads on mobile


#1

Hi,

I have a website that I would like to load to a specific part of the page when the page is visited, but only on a mobile device. Is there a way I can load to a page with a #?

What would be the best way to do this?

Thanks


#2

How are you intending to ascertain that the user is on a mobile? Device width?


#3

I am not too sure, I guess device width would work.

I’m actually having trouble getting it to work just on desktop at the moment.

I’m trying this:

<script type="text/javascript">
function load()
{
window.location.hash="scrollhash"; 
}
</script>

with a div with an id of scrollhash


#4

I have actually solved this by using the following which works on desktop, but I’m not sure how to apply it to mobile/device width.

<script type="text/javascript">
jQuery(document).ready(function () {
    // Handler for .ready() called.
    jQuery('html, body').animate({
        scrollTop: jQuery('section#scrollhash').offset().top }, 'slow');
});
</script>

#5

Why would you want to do that? What problem are you trying to solve and how do you differentiate which mobile devices you want to check for. Are you counting tablets in this scenario which may have mobile capabilities or small laptops.

It seems to me that responsive design is all you need unless you have some reason to scroll to a specific point on mobiles only.

It may help if you can explain what the problem is that you are trying to solve? Maybe you want a different layout for small viewport heights perhaps which can still be done in css with media queries based on height.

If you really do need to detect mobiles then there’s an article here that explains some techniques and some pitfalls.


#6

Thanks for the reply.

The reason I’m doing this is because I have content above the element I would like to scroll to. I want this content on all pages, but to scroll to the page article when it’s viewed on mobile.

I have now tried the below, but it doesn’t scroll like it did with the previous code.

I basically want it to scroll down when the window is less than 425px

	jQuery(document).ready(function() {
	  if (window.outerWidth < 425) {
	    jQuery('html, body').animate({
	      scrollTop: jQuery('section#scrollhash').offset().top
	    }, 'slow');
	  }
	});

#7

You could use css to move the article to the top using a height media query assuming your page is constructed in the right way.

I would be a little unnerved if my visit to a page resulted in the page scrolling down. I would think it had been hijacked and get out of there quickly. :slight_smile:

If you do want to scroll then use match media in js which is basically media queries for js.

Here’s an old example that should give you a hint :slight_smile:


#8

I don’t know what the “content above” is. I usually think of Skip Navigation Links in terms of accessibility, but it sounds like this is what you should probably be doing. It may be true that for the majority of users they do want to get to the content. But it is also true that some users may land on the page and want the “above”. IMHO it would be best to have an easy to use “jump to” option instead of making the decision for them and automatically scrolling.


#9

I just did a quick demo using matchmedia and based on height of screen.

Note that I used a 680px max- height because the iphone5 - 8 is 667px tall. Note that there are quite a few that are taller like the iphone X that is 812px.

As I said above it all depends why you are doing this as you seem to group ‘all mobile’ into one category but some mobiles are going to have more vertical height than some old desktops? The criteria as usual should apply to all devices so if your design doesn’t look right below a certain height then you change the design (or add behaviour) for all devices below that height and not try to filter out mobiles, tablets or laptops.


#10

Thanks, that worked great for me - exactly what I meant :slight_smile: