想在面面中做一个自到回到顶部的按钮,使用了jquer.scrollup.min.js这个文件,然后在自己的main.js中加载,代码如下:
$(function() {
$.scrollUp({
scrollName: 'scrollUp',
topDistance: '500',
topSpeed: 300,
animation: 'fade',
animationInSpeed: 200,
animationOutSpeed: 200,
scrollText: '',
activeOverlay: false
});
});
然后在主模版文件中加入了这个两个文件,都放在
HTML 里不用特意加一个 id=scrollUp 的链接,scrollUp 插件会自动添加一个的。
调用插件时,scrollText 属性不能是空的,你希望按钮里出现什么字,就把它的值设成什么字。
CSS 里要设置相应的样式,至少得设定一下它的位置(通过 top、right、bottom、left 属性)
以下是一个简单的示范:
/* JS */
$(function() {
$.scrollUp({
scrollName: 'scrollUp',
topDistance: '500',
topSpeed: 300,
animation: 'fade',
animationInSpeed: 200,
animationOutSpeed: 200,
scrollText: '回到顶部',
activeOverlay: false
});
});
/* CSS */
#scrollUp {
right: 30px;
bottom: 0px;
padding: 30px;
background-color: #eee;
border: 1px solid #ccc;
}
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。