add BackTop (#2160)

components/back-top/demo/basic.md

@@ -0,0 +1,14 @@
+---
+order: 0
+title: 基本
+---
+
+最简单的用法，demo 见右下角灰色按钮。
+
+````jsx
+import { BackTop } from 'antd';
+
+ReactDOM.render(
+  <BackTop />
+, mountNode);
+````

components/back-top/demo/custom.md

@@ -0,0 +1,30 @@
+---
+order: 1
+title: 自定义样式
+---
+
+可以自定义置顶按钮的样式，限制宽高: 40px * 40px。(右下角蓝色按钮)
+
+````jsx
+import { BackTop } from 'antd';
+
+const style = {
+  height: 40,
+  width: 40,
+  borderRadius: 3,
+  backgroundColor: '#57c5f7',
+  color: '#fff',
+  textAlign: 'center',
+  fontSize: 20,
+};
+
+const onClick = (e) => {
+  console.log(e);
+};
+
+ReactDOM.render(
+  <BackTop onClick={onClick} style={{ bottom: 100 }}>
+    <div style={style}>UP</div>
+  </BackTop>
+, mountNode);
+````

components/back-top/index.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import Animate from 'rc-animate';
+import Icon from '../icon';
+import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import classNames from 'classnames';
+
+function getScroll(w, top) {
+  let ret = w[`page${top ? 'Y' : 'X'}Offset`];
+  const method = `scroll${top ? 'Top' : 'Left'}`;
+  if (typeof ret !== 'number') {
+    const d = w.document;
+    // ie6,7,8 standard mode
+    ret = d.documentElement[method];
+    if (typeof ret !== 'number') {
+      // quirks mode
+      ret = d.body[method];
+    }
+  }
+  return ret;
+}
+
+export default class BackTop extends React.Component {
+
+  static propTypes = {
+    visibilityHeight: React.PropTypes.number,
+  }
+
+  static defaultProps = {
+    onClick() {},
+    visibilityHeight: 400,
+    prefixCls: 'ant-back-top',
+  }
+
+  constructor(props) {
+    super(props);
+    const scrollTop = getScroll(window, true);
+    this.state = {
+      visible: scrollTop > this.props.visibilityHeight,
+    };
+  }
+
+  scrollToTop = (e) => {
+    if (e) e.preventDefault();
+    this.setScrollTop(0);
+    this.props.onClick(e);
+  }
+
+  setScrollTop(value) {
+    document.body.scrollTop = value;
+    document.documentElement.scrollTop = value;
+  }
+
+  handleScroll = () => {
+    const scrollTop = getScroll(window, true);
+    this.setState({
+      visible: scrollTop > this.props.visibilityHeight,
+    });
+  }
+
+  animationEnd = () => {
+    const scrollTop = getScroll(window, true);
+    this.setState({
+      visible: scrollTop > this.props.visibilityHeight,
+    });
+  }
+
+  componentDidMount() {
+    this.scrollEvent = addEventListener(window, 'scroll', this.handleScroll);
+  }
+
+  componentWillUnmount() {
+    if (this.scrollEvent) {
+      this.scrollEvent.remove();
+    }
+  }
+
+  render() {
+    const { prefixCls, className, children, ...restProps } = this.props;
+    const classString = classNames({
+      [prefixCls]: true,
+      [className]: !!className,
+    });
+
+    const defaultElement = (
+      <div className={`${prefixCls}-content`}>
+        <Icon className={`${prefixCls}-icon`} type="to-top" />
+      </div>
+    );
+
+    const style = {
+      display: this.state.visible ? 'block' : 'none',
+    };
+
+    return (
+      <Animate
+        showProp="data-show"
+        transitionName="fade"
+        onEnd={this.animationEnd}
+        transitionAppear
+      >
+        <div data-show={this.state.visible} style={style}>
+          <div {...restProps} className={classString} onClick={this.scrollToTop}>
+            {children || defaultElement}
+          </div>
+        </div>
+      </Animate>
+    );
+  }
+}

components/back-top/index.md

@@ -0,0 +1,23 @@
+---
+category: Components
+chinese: 置顶
+type: Other
+english: BackTop
+---
+
+使用 `BackTop` 可以方便地回到顶部。
+
+## 何时使用
+
+当内容区域比较长，需要提供快速回到顶部的功能时。
+
+## API
+
+> 有默认样式，距离底部 `50px`，可覆盖。
+
+> 自定义样式宽高有限制，不大于 40px * 40px。
+
+| 参数        | 说明           | 类型               | 默认值       |
+|-------------|----------------|--------------------|--------------|
+| visibilityHeight    | 滚动高度达到此参数值才出现 `BackTop`   | Number | 400        |
+| onClick | 点击按钮的回调函数   | Function | -        |

components/back-top/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

components/back-top/style/index.less

@@ -0,0 +1,33 @@
+@import "../../style/themes/default";
+
+@backtop-prefix-cls: ant-back-top;
+
+.@{backtop-prefix-cls} {
+  z-index: @zindex-back-top;
+  position: fixed;
+  right: 100px;
+  bottom: 50px;
+  height: 40px;
+  width: 40px;
+  cursor: pointer;
+
+  &-content {
+    height: 40px;
+    width: 40px;
+    border-radius: 20px;
+    background-color: rgba(64, 64, 64, 0.4);
+    color: #fff;
+    text-align: center;
+    transition: all .3s @ease-in-out;
+
+    &:hover {
+      background-color: rgba(64, 64, 64, 0.6);
+      transition: all .3s @ease-in-out;
+    }
+  }
+
+  &-icon {
+    font-size: 20px;
+    margin-top: 10px;
+  }
+}

components/style/themes/default.less

@@ -119,6 +119,7 @@
 
 // z-index list
 @zindex-affix           : 10;
+@zindex-back-top        : 10;
 @zindex-modal-mask      : 1000;
 @zindex-modal           : 1000;
 @zindex-notification    : 1010;