How to scroll down to an internal anchor?

[jhodgski]

In my main navigation menu on my home page, I have a link with href=”http://localhost/mwe2014/#contact” and when I click it, the page scrolls down nicely to the Contact area.

In the content of my home page, I’ve added another like to the Contact area, but when I create a link with href=”http://localhost/mwe2014/#contact”, it doesn’t scroll there but jumps (and actually jumps a bit too far down). How can I make the behaviour here the same as for the main nav links?

Also, when you click a link in the main nav and the site scrolls down nicely, if you then click the ‘Home’ link, it doesn’t scroll back up but the page is reloaded. (This happens in the demo at https://www.livemeshthemes.com/agile/ as well.) Can this be changed so it scrolls back up instead?

Thanks,
James

[Raghavendra]

For links to function like menu items, will need some additional Javascript code for the same. Will send the same out tonight.

For making the Home jump to the Home button, you will need to set the URL as something like http://localhost/mwe2014/#header so that it jumps within the page and is also navigable from external pages.

[jhodgski]

http://localhost/mwe2014/#header didn’t work, but http://localhost/mwe2014/#container did. 🙂

Look forward to receiving the new JS code. Thanks.

[Raghavendra]

For the JS solution, I found a topic which addresses this already. Pls have a look here –

https://www.livemeshthemes.com/support/forums/topic/smooth-scroll-between-links-with-within-a-same-page/#post-3843

[jhodgski]

Thanks. I have now added…
$('a[href*=#]').smoothScroll();
…to the bottom of Agile’s js\main.js file, and have added…
<a href="#footer" rel="nofollow">smooth scroll to footer</a>
…to my page, but when I click the link it still jumps there rather than smooth scrolls. Can you advise?

Also, is there an upgrade-safe way of implementing the solution? (I am using agile-child.)

Cheers,
James

[Raghavendra]

Can you pls post as private reply a temp login to the site? I can give a try. Works for me in my installation. Hope there is no script error.

[jhodgski]

This reply has been marked as private.

[Raghavendra]

Works fine now. Just had to insert it inside a document ready or window load function. Pls check. Will get back to you with the code for the child theme.

[jhodgski]

It worked, but it broke the filterable portfolio functionality.

[Nexus]

Looks like you are making some changes right now to your site. I will get back to the issue when you are done. Thanks!

[Raghavendra]

To stay safe, it is best to prefix the above code with the element to which your internal links belong to. Like below –

$('#services-section a[href*=#]').smoothScroll();

Pls replace #services-section with the element id of your own. You can place multiple such statements to target multiple div elements containing internal links. This way the portfolio section is not affected.

[jhodgski]

Cheers. I’ve looked at the other solution page, and I prefer this solution…

<a class="smooth-scroll-link" href="#footer" rel="nofollow">Scroll smoothly to footer</a>

…with the JS code being…

$('.smooth-scroll-link').smoothScroll();

…just in case that helps anyone.

[jhodgski]

How do I implement that line of JS code in an upgrade-proof way though?

[Raghavendra]

You can just create a JS file of your own in the child theme and then have this piece of code in functions.php (make sure you have put your code in document ready function as in main.js file) –

add_action('wp_enqueue_scripts', 'mo_enqueue_scripts');


function mo_enqueue_scripts() {

    wp_enqueue_script('my-custom-js', get_stylesheet_directory() . '/js/my-custom.js', array('jquery'), false, true);
} 

Hope this works for you.

[jhodgski]

Thanks, but your code contained a couple of errors (white screen + 404).

Correct code for functions.php is:

/*
* Load my script
*/
function mo_enqueue_scripts() {
wp_enqueue_script(‘my-custom-js’, get_stylesheet_directory_uri() . ‘/js/my-custom.js’, array(‘jquery’), false, true);
}
add_action(‘wp_enqueue_scripts’, ‘mo_enqueue_scripts’);

Correct code for my-custom.js:

jQuery(document).ready(function ($) {
$(‘.smooth-scroll’).smoothScroll();
});

[Author]

Posts