javascript - Slow down bootstrap scroll-top - Stack Overflow

admin管理员组

文章数量:1026942

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

• javascript
• jquery
• twitter-bootstrap
• scrolltop

Share Improve this question Follow edited Apr 9, 2014 at 8:58 BENARD Patrick 31k1616 gold badges102102 silver badges108108 bronze badges asked Mar 18, 2014 at 13:34 dsamardjievdsamardjiev 40011 gold badge1111 silver badges3333 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You 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

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

• javascript
• jquery
• twitter-bootstrap
• scrolltop

Share Improve this question Follow edited Apr 9, 2014 at 8:58 BENARD Patrick 31k1616 gold badges102102 silver badges108108 bronze badges asked Mar 18, 2014 at 13:34 dsamardjievdsamardjiev 40011 gold badge1111 silver badges3333 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You 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

本文标签： javascriptSlow down bootstrap scrolltopStack Overflow