最新消息:Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)

javascript - Slow down bootstrap scroll-top - Stack Overflow

matteradmin5PV0评论

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
Add a ment  | 

1 Answer 1

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

Post a comment

comment list (0)

  1. No comments so far