Creating a back top button in wiki TOC

Question

I am using a script for wiki TOC and its working great. I want to add a back to top button in the body of the wiki, however, my code is flawed! Can someone help me?

 <!-- SharePoint WIKI Table of Contents. Sunnyape, August 2013 -->
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
function hideTOC() {
document.getElementById("theTOC").style.display = 'none';
document.getElementById("show").style.display = 'block';
document.getElementById("hide").style.display = 'none';
}
function showTOC() {
document.getElementById("theTOC").style.display = 'block';
document.getElementById("show").style.display = 'none';
document.getElementById("hide").style.display = 'block';
}
</script>
<div id="wikiTOC">
<table style="padding: 2px;"><tr>
<td><div class="TOCheader">Table of Contents</div></td>
<td>
<div id="show" onclick="showTOC()">[Show]</div>
<div id="hide" onclick="hideTOC()">[Hide]</div>
</td>
</table>
 <br>
<div id='theTOC'>
<script type="text/javascript"> 
$(document).ready(function(){
var L1=0, L2=0, L3=0;
$(".ms-wikicontent H1, .ms-wikicontent H2, .ms-wikicontent H3").each(function(i){
 theLevel=$(this).get(0).tagName;
 if (theLevel=="H1") {
  L1=L1+1;
  L2=0;
  L3=0;
  theLevelString=""+L1;
  }
 else if (theLevel=="H2") {
  L2=L2+1;
  L3=0;
  theLevelString=""+L1+"."+L2;
  }
 else {
  L3=L3+1;
  theLevelString=""+L1+"."+L2+"."+L3;
  }
 $(this).attr("id", "heading_" + i);
 $("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + " " + $(this).text() + "</a><br />");
});
});
showTOC();
</script>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
if($("#_wikiPageMode").attr('value') !== "Edit") {
$(document).ready(function(){$("<a href='#wikiTOC' style='text-decoration:none;'> [Back to Top]</a>").appendTo(".wiki-body h1");});
}
</script>
</div>
</div>
<style>
.ms-wikicontent H1 {color:black !important; background-color:#96cfff !important; font-size:16px !important; font-weight:bold !important; padding: 2px !important;}
.ms-wikicontent H2 {color:black !important; background-color:white !important; font-size:15px !important;}
.ms-wikicontent p  {color:gray !important; background-color:white !important; font-size:13px !important;}
.ms-wikicontent li {color:gray !important; background-color:white !important; font-size:13px !important;}
.ms-wikicontent tr {color:gray !important; background-color:white !important; font-size:13px !important;}
#wikiTOC {font-family: "Segoe UI"; background-color: white; float: left; padding: 5px; padding-top: 0px;}
#wikiTOC .TOCheader {font-family: "Segoe UI"; font-size: 13px; font-weight: bold; text-align: center; padding: 1px;}
#wikiTOC .closehide {font-family: "Segoe UI"; font-size: 13px; font-weight: normal;}
#wikiTOC a[title=H1] {font-family: "Segoe UI"; font-size:13px; font-weight: normal;}
#wikiTOC a[title=H2] {font-family: "Segoe UI"; font-size:13px; font-weight: normal; margin-left: 20px; line-height:140%}
#wikiTOC a[title=H3] {font-family: "Segoe UI"; font-size:11px; font-weight: normal; margin-left: 40px;}
</style>

Answer 1

I modify the code as below and add the code into script editor web part.

<style>
.ms-wikicontent H1 {color:black !important; background-color:#96cfff !important; font-size:16px !important; font-weight:bold !important; padding: 2px !important;}
.ms-wikicontent H2 {color:black !important; background-color:white !important; font-size:15px !important;}
.ms-wikicontent p  {color:gray !important; background-color:white !important; font-size:13px !important;}
.ms-wikicontent li {color:gray !important; background-color:white !important; font-size:13px !important;}
.ms-wikicontent tr {color:gray !important; background-color:white !important; font-size:13px !important;}
#wikiTOC {font-family: "Segoe UI"; background-color: white; float: left; padding: 5px; padding-top: 0px;}
#wikiTOC .TOCheader {font-family: "Segoe UI"; font-size: 13px; font-weight: bold; text-align: center; padding: 1px;}
#wikiTOC .closehide {font-family: "Segoe UI"; font-size: 13px; font-weight: normal;}
#wikiTOC a[title=H1] {font-family: "Segoe UI"; font-size:13px; font-weight: normal;}
#wikiTOC a[title=H2] {font-family: "Segoe UI"; font-size:13px; font-weight: normal; margin-left: 20px; line-height:140%}
#wikiTOC a[title=H3] {font-family: "Segoe UI"; font-size:11px; font-weight: normal; margin-left: 40px;}
</style>
<!-- SharePoint WIKI Table of Contents. Sunnyape, August 2013 -->
<script src="//code.jquery.com/jquery-1.12.3.min.js"></script>
<script type="text/javascript">
$(function(){
    var L1=0, L2=0, L3=0;   
    if($("#_wikiPageMode").val()!== "Edit") {
        $("<a href='#wikiTOC' style='text-decoration:none;'> [Back to Top]</a>").appendTo(".ms-wikicontent");
    }

    $(".ms-wikicontent H1, .ms-wikicontent H2, .ms-wikicontent H3").each(function(i){
        theLevel=$(this).get(0).tagName;
        if (theLevel=="H1") {
            L1=L1+1;
            L2=0;
            L3=0;
            theLevelString=""+L1;
        }else if (theLevel=="H2") {
            L2=L2+1;
            L3=0;
            theLevelString=""+L1+"."+L2;
        }else {
            L3=L3+1;
            theLevelString=""+L1+"."+L2+"."+L3;
        }
        $(this).attr("id", "heading_" + i);
        $("#theTOC").append("<a href='#heading_" + i + "' title='" + theLevel + "'>" + " " + $(this).text() + "</a><br />");
    });
    showTOC();
});
function hideTOC() {
    $("#theTOC").hide();
    $("#show").show();
    $("#hide").hide();
}
function showTOC() {
    $("#theTOC").show();
    $("#show").hide();
    $("#hide").show();
}
</script>

<div id="wikiTOC">
    <table style="padding: 2px;">
        <tr>
            <td>
                <div class="TOCheader">Table of Contents</div>
            </td>
            <td>
                <div id="show" onclick="showTOC()">[Show]</div>
                <div id="hide" onclick="hideTOC()">[Hide]</div>
            </td>
        </tr>
    </table>
    <br>
    <div id='theTOC'>
    </div>
</div>