使用 javascript 实现回到页面顶部功能

作者：七棵菜日期：2022-11-30 栏目：计算机分类：1 人气：208

- 样式表

```css
/* 容器 */
.side-toolbar {
     position: fixed;
     bottom: 45px;
     right: 0;
}
.side-toolbar a {
     display: block;
}
/* 按钮 */
.side-toolbar-up {
     display: none;
     height: 45px;
     width: 45px;
     margin-left: 10px;
     border-radius: 2px;
     background: url("../images/catalog.png") no-repeat scroll -1px -62px;
}
.side-toolbar-up:hover {
     background-position: -74px -62px;
}
```

- 模板

```html
&lt;div id="toolbar" class="side-toolbar"&gt;
    &lt;a id="sideToolbarUp" class="side-toolbar-up" title="返回顶部" href="javascript:void(0)"&gt;&lt;/a&gt;
&lt;/div&gt;
```

- js脚本

```javascript
    function get_scroll_top() {
        /* 获取当前页面的滚动条纵坐标位置   */
        return document.documentElement.scrollTop + document.body.scrollTop; /*返回滚动条的高度 */
    }

window.onscroll = function() {
        get_scroll_top() &gt; 200 ? $('#sideToolbarUp').show(): $('#sideToolbarUp').hide();
    };

/* 回到顶部 */
    $('#sideToolbarUp').bind('click', function(){
        $('body,html').animate({scrollTop: 0}, 'fast');
    });
```

标签：返回顶部 scrollTop jquery

上一篇：如何使用mvn命令导入依赖下一篇：echarts 设置渐变背景和背景图片

使用 javascript 实现回到页面顶部功能

随便看看

留言