Scroll down button - Post ID 258516
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
Thanks,
-WMFX
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
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

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.
Thanks Bob
Bob Visser wrote:
The theme is included in the V1.5 beta so you can see for yourself
Beat available here: http://www.coffeecup.com/help/articles/ … h-flexbox/
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
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

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
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:
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:
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
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:
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>
$(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>
That works beautifully for me
Thanks Alter Eagle
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/
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/
Thanks Alter Eagle
-WMFX
-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.