make iphones jump to a section on a page when it's loaded?

unwashed potato! · 30 Jan 2019 at 20:29

i have a quote form which you can view below. customer enters details and then it calculates the total and shows them a price.

on android i don't notice and issue, but for iphone customers they often find when the click calculate total, the page loads the total section, but doesn't load from the top but where they were when they click "calculate total" so the bottom of the page, so they miss the totals and are now displayed with "book quote" which they are clicking incorrectly thinking this shows the quote.

how can i make it so that the page is forced to either go to the top when it loads, or jump to a section?

if you want to see for yourself you can below:

https://www.mayercleaning.co.uk/online-quote/?service=oven

ChroniC · 30 Jan 2019 at 21:12

I need a bit of context. Did you code it? Is it a form plug in? Can you edit the site files?

There are php and java script solutions to scroll to top on form reset or button click. Hard to tell what's ideal with the context. Thanks.

unwashed potato! · 30 Jan 2019 at 23:15

Yes made it all so can easily add in anything.

What would be the php option

PiKe · 30 Jan 2019 at 23:23

I think what you're after is a jump link?

ChroniC · 31 Jan 2019 at 22:31

I think I errored saying it could be done in php.
Best bet is this
<script>
(function($) {
$(document).ready(function(){
$(this).scrollTop(0);
});
})(jQuery)
</script>

Assuming it's WordPress and has jquery enqued

unwashed potato! · 13 Mar 2019 at 17:35

anyone here with an iphone able to confirm that once they get a quote, that they aren't jumped to the top of the page to view it but instead remain at the bottom and have to scroll up to see the total section?

it's once you click "calculate total"

the next page shows the price, and a "book now" button. dont click that but if anyone would be kind enough to report back the scroll position of the page once it loads.

i've tried a few online sites but i can't get it to do what customers say it does on iphones.

RobTi · 14 Mar 2019 at 08:46

Just tried on iPad Pro 11” and page seems to load correctly after hitting the calculate now button, it takes you to the top of the next page with a breakdown of costs and as you scroll down the book now button appears

unwashed potato! · 14 Mar 2019 at 16:01

Thanks. I think it's the iPhones that the issue seems to happen

pepp77 · 14 Mar 2019 at 16:09

I can confirm on my iphone the first line I can see is

Online Savings applied

And book now is central to the screen.

unwashed potato! · 14 Mar 2019 at 19:00

thanks. i will update this page once the code i hope to sort this is uploaded and if you don't mind taking a look then to see if it's been sorted?

pepp77 · 15 Mar 2019 at 08:12

No problem.

Dj_Jestar · 15 Mar 2019 at 19:03

just place the id of the element you want the page to show at the end of url, preceded by a hash (#).

E.g.:

Code:

<form id="lol"><!-- some gubbins goes here --></form>

Then link to your page with: http://yourhost/your.page#lol

et voila.

unwashed potato! · 29 Apr 2019 at 00:45

Dj_Jestar said:
just place the id of the element you want the page to show at the end of url, preceded by a hash (#).

E.g.:

Code:

<form id="lol"></form>

Then link to your page with: http://yourhost/your.page#lol

et voila.

i've added this, though only locally, as felt it was probably the simplest option, however it only seems to work when the page is something like website.com/index.php#lol, and not just website.com/#lol

any thoughts?

visibleman · 29 Apr 2019 at 14:25

ChroniC said:
Code:

$(this).scrollTop(0);

I'm not sure using hashes would work with your form plugin, so i'd say go along with what @ChroniC said and use jQuery's scrollTop() but place it on the form submission on the final step (if you can) or alternatively, bind a click event to the 'quote' button and execute it there.

As for detecting mobile devices, agent strings is about your 'best' bet currently (this is far from 100% accurate though) and for ease i'd use a library like https://github.com/gabceb/jquery-browser-plugin and check if it's a mobile device.

unwashed potato! · 12 Jun 2019 at 22:45

pepp77 said:
I can confirm on my iphone the first line I can see is

Online Savings applied

And book now is central to the screen.

i've just done a big update to the site, including hopefully a fix for this.

any chance you're able to double check for me?

http://www.mayerovencleaning.co.uk/online-quote/?service=oven

pepp77 · 13 Jun 2019 at 09:03

Fairly sure the answer is no said:
i've just done a big update to the site, including hopefully a fix for this.

any chance you're able to double check for me?

http://www.mayerovencleaning.co.uk/online-quote/?service=oven

Yep much better.

unwashed potato! · 13 Jun 2019 at 09:23

Great thanks for confirming

pepp77 · 13 Jun 2019 at 17:54

Fairly sure the answer is no said:
Great thanks for confirming

Just realised that whilst testing I think I put an order in for an oven clean for this afternoon. Please apologise to Adam from 123 Steers Street

unwashed potato! · 13 Jun 2019 at 18:54

pepp77 said:
Just realised that whilst testing I think I put an order in for an oven clean for this afternoon. Please apologise to Adam from 123 Steers Street

too late. you're booked in and confirmed for tomorrow