Adding a scroll transition to a link...

User 2846109 Photo


Ambassador
341 posts

Is there a way to add a smooth scroll transition when a user clicks on a link that takes them to a lower area on the same page?

Thanks for any help!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2846109 Photo


Ambassador
341 posts

the same type of smooth-scroll as can be seen on this FF page:
http://framer.coffeecup.com/tips/index.html#tip_01

I see that there is a smooth-scroll class on the link container but I can't see where the specific setting are to set this up.
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
2,476 posts
Online Now

Hello from sunny bali

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {

// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();

// Store hash
var hash = this.hash;

// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){

// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script>

This is the script that is in the header on FF on one of the templates.

There are also hundreds of other scripts out there in the virtual world of smooth scrolling,,, just google it and take your pick
The Help You Need: When You Need It The Most
User 2846109 Photo


Ambassador
341 posts

Wow, thanks! That was surprisingly simple to paste in and get working. I'll definitely google this up a bit more!

Thanks for your help!
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 2699991 Photo


Registered User
2,476 posts
Online Now

You Are Very Smoothly Welcome
:D:D:D:cool::cool:
The Help You Need: When You Need It The Most
User 434929 Photo


Ambassador
937 posts

Jeff wrote:
Is there a way to add a smooth scroll transition when a user clicks on a link that takes them to a lower area on the same page?

Thanks for any help!


https://www.youtube.com/watch?v=c7-mPiq9-xo
Guys at coffeecup are awesometacular.
User 2846109 Photo


Ambassador
341 posts

Mansour ... wrote:
https://www.youtube.com/watch?v=c7-mPiq9-xo


Thanks for the great video! That was a great way to do the smooth scroll as well. Do you know where you can change the plugin options such as the data-animation-duration value?
http://www.pixelandpoly.com/ (built with Bootstrap Builder)
Video Tutorials - https://www.youtube.com/channel/UCQMcF0 … EKA/videos
The Universe from A to Z - https://universeatoz.com/ (built with Foundation Framer)
User 434929 Photo


Ambassador
937 posts

Yet to really dig into RFF , are not we have transition properties in design panel ?

or read this
https://github.com/zurb/motion-ui/tree/master/docs
Guys at coffeecup are awesometacular.

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.