diff --git a/site/templates/code.html b/site/templates/code.html
index 92b694eed8..464badf305 100644
--- a/site/templates/code.html
+++ b/site/templates/code.html
@@ -1,10 +1,12 @@
-<div class="code-box">
+<div class="code-box" id="code-box-{{post.meta.id}}">
   <div class="code-box-demo">
-    <div id="{{post.meta.id}}"></div>
+    <div class="code-box-demo-container" id="{{post.meta.id}}"></div>
     {{ post.html }}
   </div>
   <div class="code-box-meta markdown">
-    <div class="code-box-title">{{ post.title }}</div>
+    <div class="code-box-title">
+      <a href="#code-box-{{post.meta.id}}">{{ post.title }}</a>
+    </div>
     {{ post.meta.description }}
     <span class="collapse anticon anticon-circle-o-right"></span>
   </div>
diff --git a/static/style.css b/static/style.css
index 8e506e8551..f48efee1e2 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1674,20 +1674,34 @@ footer ul li > a {
   border-color: #ccc;
 }
 
-.code-box:hover .code-box-meta {
+.code-box:target {
+  border-color: #bbb;
+}
+
+.code-box:hover .code-box-meta,
+.code-box:target .code-box-meta {
   background: #fbfbfb;
 }
 
-.code-box:hover .code-box-title {
+.code-box:hover .code-box-title,
+.code-box:target .code-box-title {
   background: #fbfbfb;
   box-shadow: 0 -1.2px 0 #e9e9e9;
 }
 
+.code-box .code-box-title a,
+.code-box .code-box-title a:hover {
+  color: #666;
+}
+
 .code-box .code-box-demo {
-  padding: 42px 20px 50px;
   border-bottom: 1px solid #E9E9E9;
 }
 
+.code-box .code-box-demo > .code-box-demo-container {
+  padding: 42px 20px 50px;
+}
+
 .code-box-meta {
   position: relative;
   padding: 12px 15px;
@@ -1719,7 +1733,7 @@ footer ul li > a {
   line-height: 22px;
   position: relative;
   margin-right: 8px;
-  top: -1px;
+  top: -2px;
   color: #ccc;
 }