如何在 Shopify 网站中使用 jQuery？

Question

I am using shopify for designing my e-Commerce store in which I want my page to be scrolled automatically to the site-menu means header section should be scrolled up. I used scrollIntoView, but it's not working.

In shop.js.liquid I did this much only:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
timber.srcollIntoView = function() {
  $(wondow).on('load',function(){
    $scrollIntoView.scrollIntoView();
    });
};

I downloaded the jquery.scrollIntoview.min.js from https://github.com/Arwid/jQuery.scrollIntoView/blob/master/jquery.scrollIntoView.min.js and added this one in assets section. Could you please help me finding the next step?

Answer 1

If you do this stuff and it's still broken, press F12 in chrome and click on console and post what the error is here and/or leave me a comment.

Add your jquery to the apps.js.liquid file in your assets folder .

Example...

(function($){
    $(function(){  //document.ready

        //DOM READY code here

    });

    //Functions, Plugins, Etc.. Here
    //(does not wait for DOM READY STATE) 

})(jQuery);

if you need jquery on the server (might be a good fallback)...

use this in your header to include any js file (and maybe jquery) after you upload it to assets folder

    <!--[if lte IE 8]>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ jQuery.1.10.1.min.js | asset_url }}"><\/script>');</script>
    <![endif]-->
    <!--[if gt IE 8]><!-->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="{{ jQuery.2.1.3.min.js | asset_url }}');</script>
    <!--<![endif]-->

    <script type="text/javascript" src="{{ 'scrollIntoView.js' | asset_url }}">