update anchor style

components/anchor/AnchorLink.tsx

@@ -53,24 +53,36 @@ export default class AnchorLink extends React.Component<AnchorLinkProps, any> {
     return child;
   }
 
+  scrollTo(e) {
+    const { onClick, href } = this.props;
+    const { anchorHelper } = this.context;
+    if (onClick) {
+      onClick(href);
+    } else {
+      e.stopPreventDefault();
+      const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
+      scrollToFn(href);
+    }
+  }
+
   render() {
-    const { prefixCls, href, children, onClick, title, bounds } = this.props;
+    const { prefixCls, href, children, title, bounds } = this.props;
     const { anchorHelper } = this.context;
     const active = anchorHelper && anchorHelper.getCurrentAnchor(bounds) === href;
     const cls = classnames({
       [`${prefixCls}-link`]: true,
       [`${prefixCls}-link-active`]: active,
     });
-    const scrollToFn = anchorHelper ? anchorHelper.scrollTo : scrollTo;
     return (
       <div className={cls}>
-        <span
+        <a
           ref={(component) => component && active && anchorHelper ? anchorHelper.setActiveAnchor(component) : null}
           className={`${prefixCls}-link-title`}
-          onClick={() => onClick ? onClick(href) : scrollToFn(href)}
+          onClick={this.scrollTo}
+          href={href}
         >
-        {title}
-        </span>
+          {title}
+        </a>
         {React.Children.map(children, this.renderAnchorLink)}
       </div>
     );

components/anchor/index.tsx

@@ -11,6 +11,8 @@ export interface AnchorProps {
   prefixCls?: string;
   offsetTop?: number;
   bounds?: number;
+  className?: string;
+  style?: React.CSSProperties;
 }
 
 export default class Anchor extends React.Component<AnchorProps, any> {

components/anchor/style/index.less

@@ -32,7 +32,8 @@
       border: 3px solid @primary-color;
       background-color: white;
       transition: top .3s ease-in-out;
-
+      left: 50%;
+      transform: translateX(-50%);
       &.visible {
         display: inline-block;
       }
@@ -42,13 +43,13 @@
     padding-left: 16px;
 
     &-title {
-      display: inline-block;
+      display: block;
       position: relative;
+      transition: all .3s;
+      color: @text-color;
     }
 
-    &-active > &-title,
-    &-title:hover {
-      cursor: pointer;
+    &-active > &-title {
       color: @primary-color;
     }