Smooth scroll between links with # within a same page

Support Forums for LiveMesh Themes & Plugins Forums Appdev Theme Support Smooth scroll between links with # within a same page

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #3807
    Palmtreepalmtree
    Participant

    Hello code master,

    I’m wondering if is there any way to have smooth scroll effect within the same page with hard coded anchor#.

    For example put a link to div id=”team1″ and jump to particular anchor id (say div id=”team2″) or team3. Between those links exist in the same page, I would like to see smooth scrolling in between links instead of just static jump.

    Cheers!

    #3820
    RaghavendraRaghavendra
    Moderator

    The theme comes with the Smooth Scroll library bundled and hence you should be able to follow the instructions in the below page –

    https://github.com/kswedberg/jquery-smooth-scroll

    to smooth scroll between the internal sections by inserting simple JS into js/main.js file of the theme as explained in the above link.

    #3833
    Palmtreepalmtree
    Participant

    Hello Meteorite,

    Thank you for your advise.
    I did look at the page you referred but I couldn’t understand what to do.
    I added `$(‘button.scrollsomething’).on(‘click’, function() {
    $.smoothScroll({
    scrollElement: null,
    scrollTarget: ‘#myanchor’
    });
    return false;
    });`

    into js/main.js

    Then wherever I clicked took me to to #myanchor… lol
    But I guess it’s because scrollElement says “null” right?

    What I wanted to do was clicking any “a href” link with anchor # takes (scroll up / down) me to any target div or anchor# id so I actually don’t want to specify any div like #myanchor….

    If you could advise me, it would be great.
    I am not a programmer so it’s quite difficult to implement…

    #3843
    RaghavendraRaghavendra
    Moderator

    Simplest case is this – you have a HTML anchor with class “link-to-home” pointing to a div with id “home-alternate”.

    john.doe@example.com
    

    and then you insert this into main.js –

    $('.link-to-home').smoothScroll();
    

    the link when clicked will smooth scroll to element with id “home-alternate”.

    If you want to avoid specifying each link with href as an internal div, you can try using the code –

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

    Have verified in my test installation and it works.

    #4344
    Palmtreepalmtree
    Participant

    Hi Meteorite,

    Thank you for getting back. Your solution worked like just what I wanted!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Smooth scroll between links with # within a same page’ is closed to new replies.