Smooth scroll between links with # within a same page

[palmtree]

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!

[Raghavendra]

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.

[palmtree]

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…

[Raghavendra]

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.

[palmtree]

Hi Meteorite,

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

[Author]

Posts