返回顶部的js实现(jQuery/MooTools)

封面图 • 2025-10-30 • jQuery

要实现“返回顶部”的功能，可以使用 **jQuery** 或 **MooTools**。下面是两种方式的示例代码。

---

## ✅ 使用 jQuery 实现“返回顶部”

### 1. HTML（页面中添加一个按钮）
```html
<a href="#" id="backToTop">回到顶部</a>
```

### 2. CSS（可选，美化按钮）
```css
#backToTop {
    display: none; /* 默认隐藏 */
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}
```

### 3. jQuery JavaScript
```javascript
$(document).ready(function() {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 300) { // 当滚动超过300像素时显示按钮
            $('#backToTop').fadeIn();
        } else {
            $('#backToTop').fadeOut();
        }
    });

$('#backToTop').click(function() {
        $('html, body').animate({ scrollTop: 0 }, 800); // 平滑滚动到顶部
        return false;
    });
});
```

---

## ✅ 使用 MooTools 实现“返回顶部”

### 1. HTML（同上）
```html
<a href="#" id="backToTop">回到顶部</a>
```

### 2. CSS（可选）
```css
#backToTop {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
}
```

### 3. MooTools JavaScript
```javascript
window.addEvent('domready', function() {
    var backToTop = $('backToTop');

window.addEvent('scroll', function() {
        if (window.getScroll().y > 300) {
            backToTop.fade('in');
        } else {
            backToTop.fade('out');
        }
    });

backToTop.addEvent('click', function(e) {
        e.preventDefault();
        window.scrollTo(0, 0);
    });
});
```

---

## 📝 提示

- 如果你希望在页面加载后立即显示按钮，可以移除 `display: none` 或通过 JS 控制。
- 可以根据需要调整滚动距离（如 `300` 像素）和动画速度（如 `800` 毫秒）。

如果你需要更高级的功能（如自动隐藏/显示、带图标等），也可以告诉我，我可以进一步优化代码。