jeudi 23 juin 2016

Shopify Accordion Scroll to Top

First, let me apologize in advance: I'm a novice at this; I can follow simple directions but I don't know code very well.

I've gotten the following feature to work on my Shopify store (it's not yet launched or I would link my page): https://www.envision.io/blogs/ecommerce-pulse/28832705-how-to-add-an-faq-accordion-to-your-shopify-store

However, the issue I have is that when a new accordion button is pressed, if the previous container had a lot of content, then the old container collapses and the new container expands upwards, making it so the viewer must scroll back upwards to get to the top of the new container to begin reading. I'm trying to figure out how to make the scroll-up automated.

I found the following: http://jsfiddle.net/ilyasnone/aqw613em/

$(function() {
    $( "#accordion" ).accordion({
        heightStyle: "content",
        collapsible: true,
        active: false,
        activate: function( event, ui ) {
            if(!$.isEmptyObject(ui.newHeader.offset())) {
                $('html:not(:animated), body:not(:animated)').animate({ scrollTop: ui.newHeader.offset().top }, 'slow');
            }
        }
    });
});

and the jqueryscrollto at github (can't post link due to no reputation points).

However, I just don't know how to integrate these solutions in the code I already have working on my Shopify store. I've tried adding assets but I'm not sure exactly which ones to add or how to call them/integrate them into the current accordion solution. I don't mind changing solutions, but the only reason I got the one I'm using to work is that it came with a video tutorial (available in the link).

Can anyone help me implement a solution? Thank you again for your time.

Aucun commentaire:

Enregistrer un commentaire