-
Posts
-
Hi guys. I want to put a new js code insiede the pages for an anchors smooth scroll.
I put .js into the js directory via ftp. Now, ho can I call it into the page? I’ve tried with code block but nothing happens.
Thank you sooo muchHey bardinidavide,
Please post the code you want to add here and we’ll have a look at it.
Thanks,
RikardTHIS IS SMOOTHSCROLL .JS:
var ss = {
fixAllLinks: function() {
// Get a list of all links in the page
var allLinks = document.getElementsByTagName(‘a’);
// Walk through the list
for (var i=0;i<allLinks.length;i++) {
var lnk = allLinks[i];
if ((lnk.href && lnk.href.indexOf(‘#’) != -1) &&
( (lnk.pathname == location.pathname) ||
(‘/’+lnk.pathname == location.pathname) ) &&
(lnk.search == location.search)) {
// If the link is internal to the page (begins in #)
// then attach the smoothScroll function as an onclick
// event handler
ss.addEvent(lnk,’click’,ss.smoothScroll);
}
}
},smoothScroll: function(e) {
// This is an event handler; get the clicked on element,
// in a cross-browser fashion
if (window.event) {
target = window.event.srcElement;
} else if (e) {
target = e.target;
} else return;// Make sure that the target is an element, not a text node
// within an element
if (target.nodeName.toLowerCase() != ‘a’) {
target = target.parentNode;
}// Paranoia; check this is an A tag
if (target.nodeName.toLowerCase() != ‘a’) return;// If we didn’t find a destination, give up and let the browser do
// its thing
if (!destinationLink) return true;// Find the destination’s position
var destx = destinationLink.offsetLeft;
var desty = destinationLink.offsetTop;
var thisNode = destinationLink;
while (thisNode.offsetParent &&
(thisNode.offsetParent != document.body)) {
thisNode = thisNode.offsetParent;
destx += thisNode.offsetLeft;
desty += thisNode.offsetTop;
}// Stop any current scrolling
clearInterval(ss.INTERVAL);cypos = ss.getCurrentYPos();
ss_stepsize = parseInt((desty-cypos)/ss.STEPS);
ss.INTERVAL =
setInterval(‘ss.scrollWindow(‘+ss_stepsize+’,’+desty+’,”‘+anchor+'”)’,10);// And stop the actual click happening
if (window.event) {
window.event.cancelBubble = true;
window.event.returnValue = false;
}
if (e && e.preventDefault && e.stopPropagation) {
e.preventDefault();
e.stopPropagation();
}
},scrollWindow: function(scramount,dest,anchor) {
wascypos = ss.getCurrentYPos();
isAbove = (wascypos < dest);
window.scrollTo(0,wascypos + scramount);
iscypos = ss.getCurrentYPos();
isAboveNow = (iscypos < dest);
if ((isAbove != isAboveNow) || (wascypos == iscypos)) {
// if we’ve just scrolled past the destination, or
// we haven’t moved from the last scroll (i.e., we’re at the
// bottom of the page) then scroll exactly to the link
window.scrollTo(0,dest);
// cancel the repeating timer
clearInterval(ss.INTERVAL);
// and jump to the link directly so the URL’s right
location.hash = anchor;
}
},getCurrentYPos: function() {
if (document.body && document.body.scrollTop)
return document.body.scrollTop;
if (document.documentElement && document.documentElement.scrollTop)
return document.documentElement.scrollTop;
if (window.pageYOffset)
return window.pageYOffset;
return 0;
},addEvent: function(elm, evType, fn, useCapture) {
// addEvent and removeEvent
// cross-browser event handling for IE5+, NS6 and Mozilla
// By Scott Andrew
if (elm.addEventListener){
elm.addEventListener(evType, fn, useCapture);
return true;
} else if (elm.attachEvent){
var r = elm.attachEvent(“on”+evType, fn);
return r;
} else {
alert(“Handler could not be removed”);
}
}
}ss.STEPS = 25;
ss.addEvent(window,”load”,ss.fixAllLinks);
And then I obiouvsly have to link the -js page inside my header but I don’t know ho to do it correctly
Hey!
Please refer to this post – https://developer.wordpress.org/reference/functions/wp_enqueue_script/
You can also try adding following code to Functions.php file in Appearance > Editor
function remove_title_attr(){ ?> // Your code goes here <?php } add_action('wp_footer', 'remove_title_attr');Cheers!
YigitHi, nothing happens and I can’t understand the post you refered to.
Just tell me how to link an external .js in the pages please.
If I want to link a new .js where should I link it?
Considering I’m using child-theme.
Thank you sooo much!Hi!
The link i posted shows how to correctly enqueue scripts into your theme :)
Please add following code to Functions.php file of your child theme in Appearance > Editorfunction avia_custom_js_script() { wp_enqueue_script( 'smoothscroll-js', get_template_directory_uri() . '/js/smoothscroll.js', array(), '1.0.0', true ); } add_action( 'wp_enqueue_scripts', 'avia_custom_js_script' );Make sure that file is inside JS folder in your child theme.
Best regards,
YigitYou have been sooo clear, thank you so much. Last question. I don’t have a .js folder into child theme (just style.css and function.php). Didi you mean in the Enfold theme .js folder right?
Hi!
You mentioned that you are using a child theme. In that case, please go to your child theme and create a “js” folder and place your smoothscroll.js file inside it.
Best regards,
YigitGot it! Thank you!
What if I have to put a .js code internally in a page? Do I have to use code block? Thanks
- You must be logged in to reply to this topic.