Scroll down button - Post ID 258516

User 2022095 Photo


Registered User
121 posts

Hi Coffee Cup family, anyone know how to achieve this cool smooth scroll down button like the one here center of the page at http://scroll-portfolio.coffeecup.com/s … folio.html

Thanks,
-WMFX
User 232214 Photo


COO
827 posts

Wmfx Wmfx wrote:
Hi Coffee Cup family, anyone know how to achieve this cool smooth scroll down button like the one here center of the page at http://scroll-portfolio.coffeecup.com/s … folio.html

Thanks,
-WMFX


The theme is included in the V1.5 beta so you can see for yourself :P

Beat available here: http://www.coffeecup.com/help/articles/ … h-flexbox/
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2022095 Photo


Registered User
121 posts

Thanks Bob
User 2022095 Photo


Registered User
121 posts

Bob Visser wrote:
Wmfx Wmfx wrote:
Hi Coffee Cup family, anyone know how to achieve this cool smooth scroll down button like the one here center of the page at http://scroll-portfolio.coffeecup.com/s … folio.html

Thanks,
-WMFX


The theme is included in the V1.5 beta so you can see for yourself :P

Beat available here: http://www.coffeecup.com/help/articles/ … h-flexbox/


Hey Bob..... i'm looking at the template you mentioned and it don't scroll the same, it just jumps to its intended place/ position.
Am I missing something?

Thanks.
-WMFX

User 2823310 Photo


Registered User
312 posts

I have only been using RSD for a couple of days but I just tried this little jQuery script in RSD that I've used on other sites and it works for a smooth scroll using named anchors (now called bookmarks) if you want to try it.

In settings add this script to the footer:
<script>
$(document).ready(function(){

$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 4000);
}
});

});
</script>

You can change the speed with 4000, 6000 would be slower 1000 faster for example.

Let's use a text named anchor (bookmark) to an image.
So put a text object at the top of the page and add a link to it using a named anchor hash like this:
In href paste:
#picture

With some space between (so you have some page to scroll to see it work) at the bottom add an image.
Now select that image and put this in for it's ID
picture


Preview it in your browser to see it work.

What that script is doing is looking for any named anchor on the page and making it animate the page scroll to the ID. So if you wanted to add more just match the #anchor to the ID (which would be "anchor" in this case).

That's assuming there is a jQuery library link, I read here yesterday that may be taken out in recent releases? If it is on yours just add the link to the google jQuery above the script call in the footer:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
User 2699991 Photo


Registered User
5,305 posts

That works beautifully for me
Thanks Alter Eagle
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS


A simple quick way to contact me
https://mawarputih.coffeecup.com/forms/contact-wayan/
User 2022095 Photo


Registered User
121 posts

Thanks Alter Eagle

-WMFX

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.