diff --git a/frontend/src/components/markdown-viewer.js b/frontend/src/components/markdown-viewer.js
index 60ecb90f24..b2341a8f87 100644
--- a/frontend/src/components/markdown-viewer.js
+++ b/frontend/src/components/markdown-viewer.js
@@ -9,6 +9,7 @@ const viewerPropTypes = {
   lastModified: PropTypes.string,
   latestContributor: PropTypes.string,
   markdownContent: PropTypes.string,
+  onContentRendered: PropTypes.func,
   activeTitleIndex: PropTypes.number
 };
 
@@ -22,7 +23,10 @@ class MarkdownContentViewer extends React.Component {
     }
     return (
         <div className="markdown-content">
-          <MarkdownViewer markdownContent={this.props.markdownContent} showTOC={true} activeTitleIndex={this.props.activeTitleIndex}/>
+          <MarkdownViewer markdownContent={this.props.markdownContent} showTOC={true}
+            activeTitleIndex={this.props.activeTitleIndex}
+            onContentRendered={this.props.onContentRendered}
+          />
           <p id="wiki-page-last-modified">{gettext('Last modified by')} {this.props.latestContributor}, <span>{this.props.lastModified}</span></p>
         </div>
     );
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 056d7df755..5df3fb6d06 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -102,6 +102,10 @@
   overflow: auto;
 }
 
+.cur-view-content .article {
+  padding: 40px;
+}
+
 .cur-view-content .hd {
   padding-bottom: 0;
   margin-bottom: .5em;
diff --git a/frontend/src/css/wiki.css b/frontend/src/css/wiki.css
index 526aaf2d4c..002c481359 100644
--- a/frontend/src/css/wiki.css
+++ b/frontend/src/css/wiki.css
@@ -169,7 +169,7 @@ img[src=""] {
 }
 
 #wiki-page-last-modified {
-    margin-top:40px;
+    padding:40px;
     font-size:12px;
     color: #666;
 }
diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js
index cb7f5c880c..33395f3ee9 100644
--- a/frontend/src/pages/repo-wiki-mode/main-panel.js
+++ b/frontend/src/pages/repo-wiki-mode/main-panel.js
@@ -79,10 +79,6 @@ class MainPanel extends Component {
         });
       });
     });
-    let that = this;
-    setTimeout(function() {
-      that.getTitlesInfo();
-    }, 500);
     if (this.props.hash) {
       let hash = this.props.hash;
       setTimeout(function() {
@@ -134,8 +130,8 @@ class MainPanel extends Component {
     // todo
   }
 
-  handlePageScroll = (e) => {    
-    if (this.props.pathExist && this.props.isViewFile && !this.pageScroll && this.titlesInfo.length > 0) {
+  handlePageScroll = () => {    
+    if (this.props.pathExist && this.props.isViewFile && !this.pageScroll &&  this.titlesInfo && this.titlesInfo.length > 0) {
       this.pageScroll = true;
       let that = this;
       setTimeout(function() {
@@ -164,13 +160,8 @@ class MainPanel extends Component {
     }
   }
 
-  getTitlesInfo = () => {
-    let titlesInfo = [];
-    let headingList = document.querySelectorAll('h2[id^="user-content"], h3[id^="user-content"]');
-    for (let i = 0; i < headingList.length; i++) {
-      titlesInfo.push(headingList[i].offsetTop);
-    }
-    this.titlesInfo = titlesInfo;
+  onContentRendered = (markdownViewer) => {
+    this.titlesInfo = markdownViewer.titlesInfo;
   }
 
   render() {
@@ -229,6 +220,7 @@ class MainPanel extends Component {
                       lastModified = {this.props.lastModified}
                       isFileLoading={this.props.isFileLoading}
                       activeTitleIndex={this.state.activeTitleIndex}
+                      onContentRendered={this.onContentRendered}
                     /> :
                     <Fragment>
                       <DirentListView