Gfyuki

I'm trying to inject a scroll to anchor javascript globally in Magento 2.

More specifically this script:

$('a[href^="#"]').on('click', function(event) {

    var target = $(this.getAttribute('href'));

    if( target.length ) {

        event.preventDefault();

        $('html, body').stop().animate({

            scrollTop: target.offset().top

        }, 1000);

    }

});

I have taken the reference from this blog post.

I converted it to include defines and stuff:

define([

    "jquery",

    "jquery/ui"

], function ($) {

    'use strict';



$('a[href^="#"]').on('click', function(event) {

    var target = $(this.getAttribute('href'));

    if( target.length ) {

        event.preventDefault();

        $('html, body').stop().animate({

            scrollTop: target.offset().top

        }, 1000);

    }

});



});

And injecting it in to my themes default_head_blocks.xml with <link src="js/custom.js" />

The injection works but I am getting the following error in Chrome console:

Uncaught Error: Mismatched anonymous define() module: function ($) {

    'use strict';



require.js:166

Instead of defined use require Like this:

require([

    'jquery',

    "jquery/ui"

], function($){

    'use strict';



    $('a[href^="#"]').on('click', function(event) {

        var target = $(this.getAttribute('href'));

        if( target.length ) {

            event.preventDefault();

            $('html, body').stop().animate({

                scrollTop: target.offset().top

            }, 1000);

        }

    });

});

Add an external JS in the following way :

Try this,

Add your custom js in the following path.

app/design/frontend/Vendor/theme-name/web/js/nameofjs.js

then you need to add requirejs-config.js to the following path.

app/design/frontend/Vendor/theme-name/requirejs-config.js

then add the following code in it

 var config = {

    paths: {            

            'your_js_name' : 'js/nameofjs', 

        },                                                                

    shim: {

    'your_js_name': {

        deps: ['jquery']

    },

  }

};

and add the below code to load custom js, In your case it would be header.phtml in Magento_Theme folder in your theme

app/design/frontend/Vendor/theme-name/Magento_Theme/templates/html/header.phtml

<script>

require(['jquery','your_js_name'],function($) {

$(window).load(function () {

     /*alert('load from external jquery');*/

});});

</script>

Hope this helps and this is correct way to load any custom js in M2 as far as I know.

Peace :)

In Maggento 2 the concept of requirejs is restricting you to add the an external js which is not bound into any module. So what you can do is simply create a custom module follow this & define your js there into that module at below location

Magento_root/app/code/Vendor/Module/view/frontend/web/js/file.js

It should contains the code as follows

require([

    'jquery',

    "jquery/ui"

], function($){

    'use strict';



    $('a[href^="#"]').on('click', function(event) {

        var target = $(this.getAttribute('href'));

        if( target.length ) {

            event.preventDefault();

            $('html, body').stop().animate({

                scrollTop: target.offset().top

            }, 1000);

        }

    });

});

Define it into your requirejs-config.js located at below location

Magento_root/app/code/Vendor/Module/view/frontend/requirejs-config.js

It should Contains the code as follows:

var config = {

    map: {

        '*': {

            module_js_denotation_name: 'Vendor_module/js/file',

        }

    }

};

Now you can call it into any phtml file you want to load it as follows

<script type="text/javascript">

    require(['jquery', 'module_js_denotation_name'], function($, myscript) {

        myscript();

    });

</script>

For your requirement you need to call it into the header.phtml or the footer.phtml file.

You can also create your own phtml file at Vendor/Module/view/frontend/template/template.phtml & call it there & with the help of layout Vendor/Module/view/frontend/layout/default.xaml file you can inject your template file to the theme (I am supposing that you no how to inject your phtml to your theme through the layout files).

Note: Make sure after doing this you are running the below commands o
register your module & deploy the contents & make sure you are not making any changes to the default magento file always make the changes to your custome code that is inside the Magento_root/app directory

php bin/magento setup:upgrade

php bin/magento setup:di:compile

php bin/magento setup:static-content:deploy -f

php bin/magento cache:flush