Enable smooth-scroll for links to other pages #54
Comments
Use cases like this are why I chose to expose the Example: document.addEventListener('DOMContentLoaded', function() {
if ( window.location.hash ) {
smoothScroll.animateScroll( null, window.location.hash );
}
}); One simply runs that on page load. |
Hi: Great script! as i am really bad in JS,,,,,,,,,, so i would put in the body section: then in the head section; |
The code posted here didn't make the job for me. $(document).ready(function() {
smoothScroll.init();
$("a").click(function() {
var regExp = new RegExp(/\/\/.+?(\/.+?)\#/);
if ( window.location.hash && window.location.pathname != regExp.exec(this.href)[1]) {
window.location.href = this.href;
}
});
}); |
Hi there, Great plugin, thanks! :) Uncaught TypeError: Cannot read property 'offsetParent' of null or is there an easier way to tackle this? |
Do you have a link or demo page I can look at? If it were me, personally, I would take one of two approaches. Option 1 Use a custom WordPress walker function to crawl the Option 2 Easier, and the one I'd probably go with:
If there's only one per page, it's even easier: var link = document.querySelector( '.YOUR-MENU-CLASS .current-menu-item a[href^="#"]' );
if ( link ) {
link.setAttribute( 'data-scroll', true );
} |
Hi there, Thanks for the response! http://www.ideadigital.com.ve/ When on the Home page click on the menu in the footer (3rd column). Works like a charm. http://www.ideadigital.com.ve/nuestro-blog/ The Menu in the footer generates a "Uncaught TypeError: Cannot read property 'offsetParent' of null" error. Here's my JS:
WDYT? Thanks again for your time! :) |
For those, I would remove the if ( window.location.hash ) {
var options = {
speed: 800,
easing: 'easeInOutQuart',
};
smoothScroll.animateScroll( null, window.location.hash, options );
} |
Also, you're the first person I've seen using the new custom selector option. Cool to see it in the wild! |
I pass the rel="smooth-scroll" part in order to initialize the smoothscroll for those specific menu items. If I leave it out they won't smooth scroll to the corresponding sections, instead just link normally. |
@shofer4eto I thought these were always linking to new pages? Oh, I see what you mean. Sometimes they will be linking to the page the visitor is already on! If it were me, I'd remove var navs = document.querySelectorAll('#menu-menu-footer a[href*="' + location.pathname + '"]');
for (var i = 0, len = navs.length; i < len; i++) {
navs[i].setAttribute( 'rel', 'smooth-scroll' );
} |
Hi again, Yes, sounds like a good idea, but the functionality to add regular Smooth Scroll links on a page should also be preserved... |
@shofer4eto I would add FWIW, WordPress DOES provide mechanisms for dynamically adding content based on whether or not you're on the same page as the link, but it would require you to muck around in the |
I would add the rel="smooth-scroll" to the links in normal Page content, yes, and again for the Menus I have to add it globally. And the suggestion should work because I would do the crawling ondocument.ready prior to initializing the Smoothscroll, then leave out the rel="smooth-scroll"attribute only if the menu link is pointing to the current page. I really want ot stay away from the WP Walker_Nav_Menu methods too... |
It actually doesn't matter when you initialize smooth scroll. It checks to see if you've clicked a smooth scroll link whenever you click an element on the page, so you can add links after init and they'll still work. |
Oh, ok then... what's your objection to my approach not working then? :) |
No objection. Just letting you know. |
I meant here: '@shofer4eto I would add rel="smooth-scroll" to the links you know are local, and use some version of that script to dynamically add them to other stuff. Smooth Scroll can't be initialized on a link-by-link basis, so your suggested approach wouldn't work.' |
Anyway, I'll just get to playing around with this tomorrow and see if I can manage it. |
I've tried variations to get this working but no success...I just want to direct to another page and then scroll down to that section....
data-scroll = true and I have this in my .js file;
Yet all I get back is;
|
What you’re trying to do only works with the native CSS approach. SmoothScroll doesn’t work for anchors on page load. |
Hi @cferdinandi thanks for getting back to me, sorry I must've read the convo above wrong then.... When you say native CSS approach - how do you mean? I can't think how CSS could help when directing to another page and then scrolling to that section...? Thanks |
A newish addition to the docs:
|
Hey Chris.
Currently, smooth-scroll just works for on-page links. What about adding the possibility to link to different url paths and invoking the scroll animation with the on body load event if a hash (and some additional identifier) is present in the url? This way you could use the same links on multiple pages, e.g. in a navigation.
An example link:
/imprint/#.privacy
If the link points to another page, is marked with
data-scroll
and the hash is present in the url, smooth-scroll would invoke the animation and scroll to the element with the id or class "privacy" on page load event. As for a link to an element on the current page, you should still invoke the animation on the click event. The check could be done usingwindow.location.pathname
in this case. If you just use the hash without the additional dot, of course, the browser directly jumps to the element with the id "privacy". So I think you need an additional identifier after the hash which is removed, replaced or interpreted as the class identifier to be used to select the element on the page via thequerySelector
.What do you think?
The text was updated successfully, but these errors were encountered: