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

unwashed potato!

unwashed potato!

unwashed potato!

Soldato
Joined
12 Feb 2006
Posts
17,369
Location
Surrey
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
 
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.
 
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
 
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.
 
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
 
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"><!-- some gubbins goes here --></form>

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

et voila.
Click to expand...

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?
 
ChroniC said:
Code: 
$(this).scrollTop(0);
Click to expand...

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.
 
You must log in or register to reply here.
Back
Top Bottom