程序员的知识教程库

网站首页 > 教程分享 正文

实现回到顶部按钮 Back To Top 的两种方式

henian88 2024-10-12 03:43:55 教程分享 2 ℃ 0 评论

实现回到顶部按钮 Back To Top的效果图

回到顶部按钮，常用与PC站点中。

例如用户查看完长篇文章，可以点击按钮快速回到顶部，继续浏览其他的内容。

提供回到顶部按钮的功能，是一种很好的用户体验。

第一种方法是使用空锚点

<a href="#" class="back-to-top">︽</a>

优点是实现简单非常直接，通过HTML就可实现，无需用到Javascript。

缺点是点击就立即返回是回到顶部，比较单调，缺少动画效果。

还有一个潜在缺点是回到头部后，URL上的锚点会变成空，如果网站用到锚点功能，例如tab标签，就会互相影响。

第二种方法是使用jQuery的滚动事件和动画效果

<button class="js-back-to-top back-to-top">︽</button>

主要的做法有两步

  1. 当用户滚动到离顶部100像素时，展示回到顶部按钮

  2. 当用户点击按钮时，通过动画效果返回头部

实现回到顶部按钮 Back To Top的Javascript代码

这种方法的优点是逻辑简单，一目了然，回到顶部能够自定义动画效果，让用户感觉操作顺畅。

要说缺点就是比第一种复杂点，需要Javascript配合。

最后附上第二种方法的HTML + CSS + Javascript源码，大家可以复制后保存为html文件，双击打开即可体验。

大家如果有更好的办法，或者优化的地方，也可以和小编分享下！

<html>

<head>

<meta charset="utf-8">

<style>

.back-to-top {

display: none; /* 默认是隐藏的，这样在第一屏才不显示 */

position: fixed; /* 位置是固定的 */

bottom: 20px; /* 显示在页面底部 */

right: 30px; /* 显示在页面的右边 */

z-index: 99; /* 确保不被其他功能覆盖 */

border: 1px solid #5cb85c; /* 显示边框 */

outline: none; /* 不显示外框 */

background-color: #fff; /* 设置背景背景颜色 */

color: #5cb85c; /* 设置文本颜色 */

cursor: pointer; /* 鼠标移到按钮上显示手型 */

padding: 10px 15px 15px 15px; /* 增加一些内边距 */

border-radius: 10px; /* 增加圆角 */

}

.back-to-top:hover {

background-color: #5cb85c; /* 鼠标移上去时，反转颜色 */

color: #fff;

}

</style>

</head>

<body>

<div style="background-color:#5cb85c;color:white;padding:20px">固定到底部</div>

<div style="background-color:#f6f6f6;padding:20px 20px 1000px">

该实例演示了如何创建一个“回到顶部”按钮。请往下滚动，体验效果。</div>

<button class="js-back-to-top back-to-top" title="回到头部">&#65085;</button>

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>

<script>

$(function () {

var $win = $(window);

var $backToTop = $('.js-back-to-top');

// 当用户滚动到离顶部100像素时，展示回到顶部按钮

$win.scroll(function () {

if ($win.scrollTop() > 100) {

$backToTop.show();

} else {

$backToTop.hide();

}

});

// 当用户点击按钮时，通过动画效果返回头部

$backToTop.click(function () {

$('html, body').animate({scrollTop: 0}, 200);

});

});

</script>

</body>

</html>

最最后是蜜蜂小提示时间，让您了解更多。

蜜蜂小提示

Javascript操作的类名，使用“js-”开头，可以和CSS类区分开来，使逻辑更清晰，修改时也不用担心改错了。

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表