Avatar kjetilengen asked

Smooth scroller to anchor

Hi,

In the Warp page () it says that it includes «Smooth Scroll – Scroll smoothly to a section of a page when clicking named anchors in your HTML markup.» I can see that the To-top scroller makes use of this, but i can't seem to find out how... Can anybody help me out here?

  • Warp Theme
  • General Question

11 Answers

4

Avatar berlin80210 answered

Skadoo! brianmac2021 was right in his/her theory:

Simply add this to template.js file, replacing #anchor with the name of your anchor! Works like a charm :-)

// Smoothscroller  
    $('a[href="#anchor"]').smoothScroller({ duration: 500 });
5

Avatar joon2008 answered

just add this line

$('a[href*=#]').smoothScroller({ duration: 1000 });

below
$('a[href="#page"]').smoothScroller({ duration: 500 });

on template.js

and
use any type of # like this.

the # links
<a href="#tips"><h2>1.tips</h2></a>

call this id
<a id="tips"><h2>1.tips</h2></a>

:) have fun with it.

Edited

2

Avatar brianmac2021 answered

I did a little digging, and found at least a starting point. If you go into the template.js file (I'm using Yoo_Shelf) you'll see this:

    // Smoothscroller  
    $('a[href="#page"]').smoothScroller({ duration: 500 });

I tried duplicating it and doing this:

    // Smoothscroller  
    $('a[href="#top"]').smoothScroller({ duration: 500 });

To create a smoothscroll everytime I click on a link that goes to "#top", but it's not working. However, I think this is probably a good starting place for us to look?

1

Avatar kjetilengen answered

Thanks for the quick answer, but i don't want to use it for to-top scroller... I have a menu with links to anchors on my default page and want a smooth scroll to the anchor further down. Am I just stupid that don't get this? The link you posted shows how to put the to-top-scroller inside an article with a new ID. Do i only have to add several ID's to the custom.css and i'm fine? Really chaos in my head now... ;)

EDIT: Tested at bit on my site now and found that the smooth scroll seems to work only with the #page anchor. Is this correct? In that case the Warp page should not say "...scroll smoothly to a section of a page..."

Edited

0

Avatar pmarty answered

Hello
+1 for this feature.

How to create links to anchors in the page with a smooth scroll to the anchor when link is clicked?

Can't find the solution, please help
Philippe

0

Avatar kjetilengen answered

Good to see that it's not just me ;) Press the +-button on my original post to vote it up :)

0

Avatar kjetilengen answered

Can anybody from Yootheme support answer if its possible to use smooth scrolling other than to-top-scrolling? If so, how can i accomplish this?

0

Avatar brianmac2021 answered

I'd also like to know how to incorporate additional smooth scrolls to new #anchors within articles!

0

Avatar kjetilengen answered

Thanks a million berlin80210 and brianmac2021. That did the trick, but since my URL is ./#anchor i had to make the code:

$('a[href="/./#anchor01"]').smoothScroller({ duration: 1000 });  
$('a[href="/./#anchor02"]').smoothScroller({ duration: 1000 });

I just checked the HTML and copied the content of the href attribute on my links.

Maybe something for you guys at YOOtheme to consider putting into your documentation?

Edited

0

Avatar michele.de.filippi answered

Hello guys I followed the instructions step by step, I created an article and inside I created a link called anchored # demo. Then I opened the file template.js I duplicated the line
/ / Smoothscroller
$ ('a [href = "# page"]'). smoothScroller ({duration: 500});
and I have changed
/ / Smoothscroller
$ ('a [href = "# demo"]'). smoothScroller ({duration: 500});
But it does not work.
why?

Know someone who can answer? Share a link to this question via email or twitter.