BlueOwlCreative » Topic: Smooth Scrolling on Main Page

Smooth Scrolling on Main Page

atpay — Mon, 19 Sep 2016 22:01:31 +0000

Hi,

We tried to implement the smooth scrolling effect on a page with no luck when following the Documentation >> Setup2 samples for the menu or using the button option. In the outputted code the “rel” attribute doesn’t appear and so instead of getting smooth scrolling it just jumps as usual. In the developer console I can see the smooth_scroll file included, but I can access its methods from the jQuery object. I’m wondering if there’s a JavaScript Closure missing or a document.ready() call or similar.

Please see the site at: goo.gl/C6V872. Google link added to prevent indexing the site in a support ticket

Reply To: Smooth Scrolling on Main Page

atpay — Mon, 19 Sep 2016 23:27:46 +0000

Update: I believe I was able to get the smooth scroll to work. However, on Chrome the navigation links reload the page and then scroll. Also, the scroll stop point seems to be off. I would like the scroll stopping point to be around the top of the anchored block.

Please advise – Thanks!

Reply To: Smooth Scrolling on Main Page

BlueOwl — Tue, 20 Sep 2016 07:58:54 +0000

Hi there,

Are you speaking of the “Start Now” button?
You seem to have figured it out (the reloading – only the anchor should be there without the URL).
As for the position – it’s the testimonial carousel that breaks the positioning – the carousel loads/positions itself after page load that’s why your anchor position is misplaced…
I would play around with that carousel, experiment with having it in a normal Row (not full width). Stretch the column that holds it etc…

Another way would be to place an ID that you would eventually anchor a bit below the actual heading that you target.

Reply To: Smooth Scrolling on Main Page

atpay — Tue, 20 Sep 2016 16:47:36 +0000

Thanks for the advice.

After some experimentation, I simply removed the testimonial block to see if that was indeed the issue. The position still seem to be off.

In addition, I have uncovered another issue. If you navigate to security from the Main page, and then would like to see pricing, the smooth scroll takes you all the way to the bottom of the main page and not the pricing anchor? What could be causing that issue?

Thank you

Reply To: Smooth Scrolling on Main Page

BlueOwl — Wed, 21 Sep 2016 14:29:38 +0000

Hi again,

Yes, it’s the same issue – you have a logo carousel above that anchor and other dynamically added elements + full width rows that push the content around in runtime and mess up the positioning. Navigating from another page – same thing content loads differently so takes you elsewhere. Let’s see, what if you add a delay to the scroll, find this in your common.js:

smoothScroll.animateScroll( null, window.location.hash, options );

and replace with this:

setTimeout(function() {
smoothScroll.animateScroll( null, window.location.hash, options );
}, 1000);