emptymalei
10/30/2016 - 8:31 PM

floating toc

floating toc


<div id="float-bot-div">
<button id="toc-button-side">ToC</button>  
<button id="back-to-top-button">Top</button>
</div>


<script type="text/javascript">
if ($('#markdown-toc').length){
    
    $("#toc-button-side").css("display","inline-block");
    $("#toc-button-side").css("position","absolute");
    $("#toc-button-side").click(
        function () {
            $("#markdown-toc").animate({width: 'toggle'});
                    }
    )    
};






    $('#back-to-top-button').click(function() {
    $('html, body').animate({
        scrollTop: 0
    }, 700);
    return false;
});
</script>


#float-bot-div {
    position: fixed;
    bottom: 1em;
    right: 0.5em;
    width: 4em;
}
#toc-button {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #ec2028;
    background-color: #FFF;
    padding: 1em;
    border: 1px solid #ec2028;
    display: block;
    width: 4em;
}
#toc-button-side {
    right: 2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #ec2028;
    background-color: #FFF;
    padding: 1em;
    border: 1px solid #ec2028;
    display: none;
    width: 4em;
}
#back-to-top-button {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    color: #ec2028;
    background-color: #FFF;
    padding: 1em;
    border: 1px solid #ec2028;
    display: block;
    width: 4em;
}