I have the scroll-top property on my logo and in my footer but the further I am from the top of the page the faster it scrolls up! So when I scroll-top from the bottom of the page its like a rocket! How would I go about slowing this down? I could not locate a specific enough answer
You can take a look at live site here
I have the scroll-top property on my logo and in my footer but the further I am from the top of the page the faster it scrolls up! So when I scroll-top from the bottom of the page its like a rocket! How would I go about slowing this down? I could not locate a specific enough answer
You can take a look at live site here
Share Improve this question edited Apr 9, 2014 at 8:58 BENARD Patrick 31k16 gold badges102 silver badges108 bronze badges asked Mar 18, 2014 at 13:34 dsamardjievdsamardjiev 4001 gold badge11 silver badges33 bronze badges 4- Which plugin do you use for scrolling ? – BENARD Patrick Commented Mar 18, 2014 at 13:51
- I am using bootstrap 3, trying to find out exactly what it uses 1 second – dsamardjiev Commented Mar 18, 2014 at 14:11
- Please share your code where you ask to the link to scroll to the top. – BENARD Patrick Commented Mar 18, 2014 at 14:13
-
is is current in the navbar
<a href="#" class="navbar-brand scroll-top">
and footer<span class="ion-ios7-arrow-up up-icon scroll-top">
– dsamardjiev Commented Mar 18, 2014 at 14:16
1 Answer
Reset to default 4You don't say how you initiate the scrolling effect so :
1: Unbind your exiting onclick event :
$('.scroll-top').unbind('click');
2 : Create new scroll event with wanted duration (here 5s )
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 5000);
});
UPDATE :
Replace :
<a href="#" class="navbar-brand scroll-top">
<img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png">
</a>
By :
<a href="#" class="navbar-brand custom-scroll-top">
<img class="logo" width="45" height="45" alt="lightning bolt logo" src="img/logo.png">
</a>
And add this JS :
$('.custom-scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 5000);
});
UPDATE 3 : The scroll effect is from your scroll-link.js file Extract :
// scroll to top action
$('.scroll-top').on('click', function(event) {
event.preventDefault();
$('html, body').animate({scrollTop:0}, 'slow');
});
You can too overide the 'slow' by the value you want