Scroll to Top Using jQuery (Setup time: 2mins)

Quickly create website back to top scrolling function (set time: 2 minutes)

This guide will guide you step by step how to set up the Back to Top feature on your website. Just scroll down this page to view the demo.

1. Download scrollTo plugin and include it.
2. Get an image (arrow or similar).
3. contains the following HTML code.
4. contains the following jQuery/JavaScript code to capture window scrolling and process the display of images.
5. It's that simple!

HTML

<code class="language-html"><a id="scroll-to-top" href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">
    <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036397399855.png" class="lazy" alt="Scroll to Top Using jQuery (Setup time: 2mins) ">
</a></code>

jQuery

This jQuery code will display the image when the user scrolls down, hide the image when scrolling up, and handle click events.

<code class="language-javascript">$(document).ready(function() {
    var $scrollTop = $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top');

    $(window).scroll(function() {
        // 向上滚动
        if ($(this).scrollTop() > 100) {
            $scrollTop.fadeIn(1000);
        } else {
            $scrollTop.hide();
        }
    });

    $scrollTop.click(function(e) {
        e.preventDefault();
        $.scrollTo(0, 1000); // 使用scrollTo插件
    });
});</code>

Note: If you need a cross-browser-compatible solution, use the following code:

<code class="language-javascript">window.scrollTo(0, 0); // Chrome滚动到顶部错误修复</code>

CSS

This simple CSS code is used to handle the display of images and the transparency of cross-browser.

<code class="language-css">https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    display: none;
    opacity: 0.5; /* 简化透明度设置 */
    transition: opacity 0.3s ease; /* 添加平滑过渡效果 */
}

https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bscroll-to-top:hover {
    opacity: 1.0; /* 简化透明度设置 */
}</code>

jQuery ScrollTop FAQs (FAQs)

How to use jQuery ScrollTop to scroll to a specific element on the page?

To use jQuery ScrollTop to scroll to a specific element on the page, you need to first select the element using the jQuery selector and then use the scrollTop method. Here is an example:

<code class="language-javascript">$('html, body').animate({
    scrollTop: $("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top
}, 2000);</code>

In this code, "https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement" is the ID of the element you want to scroll to, and 2000 is the duration of the scroll animation in milliseconds. This will smoothly scroll the page to the specified element in 2 seconds.

Can I use jQuery ScrollTop without animation?

Yes, you can use jQuery ScrollTop without animation. The animate method in jQuery is not required for scrollTop. Here's how to do it:

<code class="language-javascript">$('html, body').scrollTop($("https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmyElement").offset().top);</code>

This will immediately scroll the page to the specified element.

(The subsequent FAQ content is consistent with the original text, omitting duplicate parts to avoid redundancy.)

The above is the detailed content of Scroll to Top Using jQuery (Setup time: 2mins). For more information, please follow other related articles on the PHP Chinese website!