jquery滚动条平滑滚动_使用jQuery创建平滑滚动的“返回顶部”按钮

jquery滚动条平滑滚动

Using jQuery and just a few lines of code, you can create simple and user-friendly “Back to Top” buttons which display when the user starts to scroll down a web page; and when clicked, smoothly scrolls the user automatically back to the top.

使用jQuery和几行代码，您可以创建简单易用的“返回首页”按钮，这些按钮将在用户开始向下滚动网页时显示； 点击后，会平滑地将用户自动滚动到顶部。

The two jQuery methods we’ll be using is the scroll() event to detect when a user is scrolling in the web page; and the animate() method to perform the animation when the user clicks the “Back to Top” button.

我们将使用的两种jQuery方法是scroll()事件，用于检测用户何时在网页中滚动； 当用户单击“返回页首”按钮时，使用animate()方法执行动画。

If you are not designing your “Back to Top” button yourself, there are free resources you can try such as IconMonstr and IconFinder to find one.

如果您不是自己设计“返回页首”按钮，则可以尝试使用免费资源，例如IconMonstr和IconFinder来查找一个。

For the button itself, you may wish to position it absolutely in a specific area of your page. Here is example CSS code to accomplish this:

对于按钮本身，您可能希望将其绝对定位在页面的特定区域中。 下面是示例CSS代码来完成此任务：

#quickjump { display: none; position: absolute; top: 33%; right: 3%; width: 32px; height: 32px; cursor: pointer; background: url(‘up-arrow.png’) no-repeat; }

#quickjump {显示：无； 位置：绝对； 最高：33％； 正确：3％； 宽度：32px； 高度：32px； 光标：指针； 背景：url('up-arrow.png')不重复； }

As you can see, this element will be hidden by default through CSS, because if we were to hide this with JavaScript, the element may be visible for a split second as the DOM is loading, and would remain visible if a user has JavaScript disabled, of course.

如您所见，默认情况下，此元素将通过CSS隐藏，因为如果我们要使用JavaScript隐藏该元素，则该元素可能会在加载DOM的一瞬间可见，而在用户禁用JavaScript的情况下仍将可见， 当然。

On to the jQuery code, and this is just as easy:

转到jQuery代码，这很容易：

$(window).scroll(function() { if($(window).scrollTop() > 250) { // in pixels $(‘#quickjump’).fadeIn(800); // 800 milliseconds for the fade in effect } else { $(‘#quickjump’).fadeOut(‘fast’); // 200 milliseconds for the fade out effect } });

$(window).scroll(function(){if($(window).scrollTop()> 250){//以像素为单位$('＃quickjump')。fadeIn(800); //淡入800毫秒}其他{$('＃quickjump')。fadeOut('fast'); //淡出效果200毫秒}));

This code is to either display or hide the button depending on how far the user has scrolled down. If the user scrolls back up the page and is less than 250 pixels from the top, the button will fade out.

此代码用于显示或隐藏按钮，具体取决于用户向下滚动的距离。 如果用户向后滚动页面，并且距离顶部不到250像素，则该按钮将淡出。

$(‘#quickjump’).click(function() { $(‘body,html’).animate({scrollTop: 0}); });

$('＃quickjump')。click(function(){$('body，html')。animate({scrollTop：0});});

And that’s all there is to it. It’s that simple. Make sure all your jQuery code is contained within the $(document).ready() method to make sure it is only executed once the DOM has fully loaded:

这就是全部。 就这么简单。 确保$(document).ready()方法中包含所有jQuery代码，以确保仅在DOM完全加载后才执行：

$(document).ready(function() { // your code here });

$(document).ready(function(){//您的代码在这里});

翻译自: https://www.eukhost.com/blog/webhosting/creating-a-smooth-scroll-back-to-top-button-using-jquery/

jquery滚动条平滑滚动