<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="generator" content="58IMG.COM" /> <title>jQuery返回顶部插件-jquery.scrollUp.min.js</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <!-- 回到顶部 jquery插件 --> <script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script> <style type="text/css"> .content { height: 1500px; } #scrollUp { background-image: url("top.png"); bottom: 20px; right: 20px; width: 38px; height: 38px; } </style> </head> <body> <div class="content"></div> <script type="text/javascript"> $(function () { //scrollup $.scrollUp({ scrollName: 'scrollUp', // Element ID topDistance: '300', // Distance from top before showing element (px) topSpeed: 300, // Speed back to top (ms) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms) animationOutSpeed: 200, // Animation out speed (ms) scrollText: '', // Text for element activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF' }); }); </script> </body> </html>
除以上代码还需引入一张点击的图标图片，
最新学习canvas,可以利用canvas绘制向上箭头的图标，代替 箭头图片：【推荐】
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="generator" content="58IMG.COM" />
<title>jQuery返回顶部插件-jquery.scrollUp.min.js</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- 回到顶部 jquery插件 -->
<script src="https://cdn.bootcss.com/scrollup/2.4.1/jquery.scrollUp.min.js"></script>
<style type="text/css">
.content { height: 1500px; }
#scrollUp { background-color:#454545; border-radius:30px; bottom: 20px; right: 20px; 38px; height: 38px; }
</style>
</head>
<body>
<div class="content">
</div>
<script type="text/javascript">
$(function () {
//scrollup background-image: url("top.png");
$.scrollUp({
scrollName: 'scrollUp', // Element ID
topDistance: '300', // Distance from top before showing element (px)
topSpeed: 300, // Speed back to top (ms)
animation: 'fade', // Fade, slide, none
animationInSpeed: 200, // Animation in speed (ms)
animationOutSpeed: 200, // Animation out speed (ms)
scrollText: '<canvas id="cvs" width="38px;" height="38px;" ></canvas>', // Text for element
activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
});
var canvas = document.getElementById('cvs');
cxt=canvas.getContext('2d');
cxt.beginPath();
cxt.lineCap = 'round';//圆线头
cxt.moveTo(13, 22);
cxt.lineTo(19,14);
cxt.lineTo(25,22);
cxt.strokeStyle = "#FBFBFB";
cxt.lineWidth = 3;
cxt.stroke();
});
</script>
</body>
</html>