Ufdjrw

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