jquery回到顶部组件

作者:frank 发表日期:2015-08-24 16:04:35 更新日期:2016-08-15 20:10:22 分类:猿文色

摘要

jquery回到顶部组件

正文

配置如下:

  var optionsTheme1 = {
    imgSrc: 'https://static-file.0xfc.cn/to_top.png',
    displayTop: 500,
    speed: 200,
    size: {
      height: '35px',
      width: '35px'
    },
    position: {
      right: '40px',
      bottom: '30px'
    },
    template: ''
  };
  var optionsTheme2 = {
    imgSrc: 'https://static-file.0xfc.cn/to_top_2.png',
    displayTop: 2500,
    speed: 800,
    size: {
      height: '40px',
      width: '40px'
    },
    position: {
      right: '90px',
      bottom: '60px'
    },
    template: ''
  };
  var optionsTheme3 = {
    imgSrc: 'https://static-file.0xfc.cn/to_top_3.png',
    displayTop: 4000,
    speed: 2000,
    size: {
      height: '45px',
      width: '45px'
    },
    position: {
      right: '140px',
      bottom: '90px'
    },
    template: ''
  };
  $(".wan-backtotop-theme-1").WanBackToTop(optionsTheme1);
  $(".wan-backtotop-theme-2").WanBackToTop(optionsTheme2);
  $(".wan-backtotop-theme-3").WanBackToTop(optionsTheme3);

HTML文件如下:

<div class="wan-backtotop-theme-1"></div>
<div class="wan-backtotop-theme-2"></div>
<div class="wan-backtotop-theme-3"></div>

Options:

imgSrc: string,图片路径,可自行设置
displayTop: number,设置离顶部多远开始显示按钮
speed: number,回到顶部的时间
size: object,{height, width},设置图片的尺寸
position: object,{right, bottom},设置图片的绝对位置
template: 暂时未用

DEMO