How to scroll down to an internal anchor?

Support Forums for LiveMesh Themes & Plugins Forums Agile Theme Support How to scroll down to an internal anchor?

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #4286
    Jhodgskijhodgski
    Member

    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

    #4288
    RaghavendraRaghavendra
    Moderator

    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.

    #4294
    Jhodgskijhodgski
    Member

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

    Look forward to receiving the new JS code. Thanks.

    #4357
    RaghavendraRaghavendra
    Moderator

    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

    #4368
    Jhodgskijhodgski
    Member

    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

    #4379
    RaghavendraRaghavendra
    Moderator

    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.

    #4388
    Jhodgskijhodgski
    Member
    This reply has been marked as private.
    #4392
    RaghavendraRaghavendra
    Moderator

    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.

    #4424
    Jhodgskijhodgski
    Member

    It worked, but it broke the filterable portfolio functionality.

    #4436
    NexusNexus
    Moderator

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

    #4437
    RaghavendraRaghavendra
    Moderator

    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.

    #4453
    Jhodgskijhodgski
    Member

    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.

    #4454
    Jhodgskijhodgski
    Member

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

    #4479
    RaghavendraRaghavendra
    Moderator

    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.

    #4492
    Jhodgskijhodgski
    Member

    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();
    });

Viewing 15 posts - 1 through 15 (of 16 total)
  • The topic ‘How to scroll down to an internal anchor?’ is closed to new replies.