JavaScriptでブラウザバックと同じ挙動のボタンをつくる

JavaScript

history.back();

で実装できる模様です。

DEMO

デモページへGo！

※ ボタンを押すと戻ってこれるはずです。

HTML

<div class="btn back">
    <div class="inner">
        <a id="btnBack" class="txt">BACK</a>
    </div>
<div>

SCSS

@import "compass/reset";

html, body {
    background: #ccc;
}

.btn {
    margin: 120px auto; 
    width: 80px;
    overflow: hidden;
}

.inner {
    display: inline-block;
    position: relative;
    width: 80px; height: 80px;
    border-bottom: solid #513c6c 4px;
    border-radius: 50%;
    cursor: pointer;
    background: #8f65c3;
    text-decoration: none;

    &:hover {
        margin-top: 4px;
        border: none;
    }
}

.txt {
    display: block;
    color: #d2b7f3;
    font: 20px "AvenirNext-Heavy" bold;
    text-align: center;
    line-height: 80px;
}

JavaScript

(function(win, doc) {

    "use strict";
    
    var btnBack = doc.getElementById("btnBack");
    
    btnBack.onclick = function() {
        history.back();
    };

})(this, document);