Post by jorem » Mon May 18, 2015 4:19 pm

Using OC 1.5.6.4 and the default template.

Since I have quite a lot of content at the top of the shop, the actual shop doesn't start until 8-900 pixels down.
Hence, it's a PITA for customers when they click a button or link in the shop and the new page opens at the top and they'll need to scroll down to the shop each time.

I have found a way to stop this by editing the file catalog/view/javascript/common.js (setting the scrollTop to 800 instead of 0), but that doesn't work throughout the shop but merely in some cases.

Here are my questions:

1. How can I stop this "jump/scroll to top" globally in the shop?
2. I would like to have new pages open exactly where the actual shop starts, e.g. by using a Named Anchor. Is there some way to implement this, both in the javascript file mentioned above and in all other cases?

Any help would be highly appreciated....
Cheers!

Danne
----------------------------
https://proformica.com


Active Member

Posts

Joined
Thu Oct 07, 2010 9:42 pm

Post by labeshops » Mon May 18, 2015 7:57 pm

Honestly, I would suggest redesigning your store. a 8-900 pixel header is way too big. The top of your screen or "above the fold" (the area they see on landing without scrolling) is your prime real estate and making a customer scroll down to see your content, which you already know is a pita for them, could cost you sales. The fact you want them to by pass the header on new pages says you don't have important content in it, so get rid of it. Your header at max should be 200 pixels and less is always good. I would consider using a side bar for content you feel they need to see, but get products and your sales message above the fold.

Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by jorem » Mon May 18, 2015 11:43 pm

labeshops wrote:Honestly, I would suggest ....
Thanks, but I didn't ask about your opinion regarding the tall header and I don't think I need to explain why the site is made that way either as it's utterly irrelevant.

I was merely asking about help to stop the page(s) jump/scroll to top.

Danne
----------------------------
https://proformica.com


Active Member

Posts

Joined
Thu Oct 07, 2010 9:42 pm

Post by labeshops » Tue May 19, 2015 1:41 am

Okay well..good luck with that.

Running Opencart v3.0.3.9 with multi-stores and the default template from https://www.labeshops.com which has links to all my stores.


User avatar
Expert Member

Posts

Joined
Thu Aug 04, 2011 4:41 am
Location - Florida, USA

Post by PeteA » Tue May 19, 2015 8:33 pm

jorem wrote:
labeshops wrote:Honestly, I would suggest ....
Thanks, but I didn't ask about your opinion regarding the tall header and I don't think I need to explain why the site is made that way either as it's utterly irrelevant.

I was merely asking about help to stop the page(s) jump/scroll to top.
Wouldn't have said it was an opinion, but a pretty standard design concept for any site for exactly the reasons you're encountering.

Onto your questions.

1: On any page load browsers will render the page from the top as browsers all assume that 100% of the page is relevant and the user needs to view the top of the page first (you wouldn't start reading a book halfway through a chapter).

To get round this you will need to implement a hack with JavaScript:

Code: Select all

window.scrollTo(0, 900)
This will need to go at the bottom of your code (just above the closing body tag) and you may need to chain it into a small delay (100ms) but YMMV. The key is you can't fire the scroll until the dom is ready and the page has loaded. You will need to ensure that all of your images have pre-defined widths and heights too and not rely on the browser pulling this from the image itself.

2: There are two ways of implementing anchors, you could either modify the Url class to change the link method so that it always appends a '#topcontent' anchor, or you could again use javascript to find the anchor and then perform a .scrollTo. Personally modifying the Url class is a better solution as the browser will detect the anchor much more quickly than javascript.

One thing to note, is that a big page header may have an impact on your SEO ranking as Google renders pages before it indexes them. One solution often employed is to have a larger header on the home page and a smaller one on subsequent pages.

New member

Posts

Joined
Wed Jul 30, 2014 5:46 pm

Post by jorem » Tue May 19, 2015 11:59 pm

PeteA:

Thanks a bunch for useful hints. I'll pursue the suggestion of modifying the url-class with a named anchor. As I wrote above, I tried the javascript hack but it didn't work on all pages. Hence, part of my Q.

PS:

Regarding the unusual height of the header:

The shop is simply a way for passengers to buy tickets and beverages for a short cruise. Which means that the "sale" has already been done as that's what the site is all about. Check out http://stella-polaris.nu and you'll understand (if you can figure out Swedish, hehe).

I just don't like people offering unsolicited advice and viewpoints when they know nothing about the prerequisites (who likes a know-it-all?). Been in the ad and marketing industry for 40 years and creating websites since 1998. So, while I'm certainly not a world champ, I know my way around the business and merely want people to reply to the actual question(s) I ask.

Which you did. Thanks! ;-)

Danne
----------------------------
https://proformica.com


Active Member

Posts

Joined
Thu Oct 07, 2010 9:42 pm
Who is online

Users browsing this forum: Semrush [Bot] and 22 guests