Make Scroll to Top use Link on Menu Navigation

Ada yang tidak biasa pada tutorial scroll to top kali ini! Biasanya jika kita membuat tut back to top pasti terbayangkan tombol/link jika di pencet akan kembali ke atas? Tetapi untuk saat ini kita akan membuat trick tombol kembali ke atas akan dipadukan dengan sebuah menu navigasi! Jadi ketika sobat memencet tombol, bukan kembali ke atas melainkan akan membuka sebuah navigation menu yg tersembunyi. Setelah terbuka menunya maka akan ada beberapa title, yg mana title tersebut telah disisipkan unik-id guna melakukan scroll to...
Begitulah kira-kira penjelasan yg membingungkan :D

#navigation {
display: none;
position: fixed;
top: 0;
left: 0;
text-align: center;
font-size: 1.1em;
width: 100%;
height: 50px;
color: #fff;
background: #6c524d;
z-index: 1;
}
ul {
list-style-type: none;
padding: 0;
line-height: 1em;
}
li {
padding-left: 2%;
display: inline;
}
li:first-child {
padding-left: 0;
}
#tsttb {
border: none;
display: none;
position: fixed;
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
line-height: 42px;
color: #fff;
cursor: pointer;
font-size: 1.7em;
background: #6c524d;
border-radius: 5px;
-o-border-radius: 5px;
-webkit-border-radius: 5px;
}
#tsttb:after {
content: "☰";
}
#tsttb:focus {
outline: none;
}

Planing syntax HTML<div id="navigation">
<ul>
<li><a href="#home">HOME</a></li>
<li><a href="#about">ABOUT</a></li>
<li><a href="#services">SERVICES</a></li>
<li><a href="#works">WORKS</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
<button id="tsttb"></button>

Pada syntax link HTML sudah ada hashtag (#) yg memiliki fungsi sebagai unik-ID. Buat apa, unik_ID sebagai tanda scroll-to-top. Pada syntax HTML di buat 5 title menu. Jadi akan ada unik0id berjumlah 5 jenis. Perhatikan komposisi HTML berikut...

<div id="home">
 BLAH-BLEH-BLOH Here
</div>
<div id="about">
 BLAH-BLEH-BLOH Here
</div>
<div id="services">
 BLAH-BLEH-BLOH Here
</div>
<div id="works">
 BLAH-BLEH-BLOH Here
</div>
<div id="contact">
 BLAH-BLEH-BLOH Here
</div>

Hashtag yg berada pada link menu, akan terintegrasi dengan komposisi HTML yg sudah disisipkan unik ID. Coba sobat cermati <div id="home"> Sobat bisa ganti #hashtag dan id="hashtag" yg penting harus sama!
Langkah selanjutnya masukan jQuery and JavaScript berikut sebelum/di atas tag </body>

<script type='text/javascript'>
//<![CDATA[
// Show/hide menu & button on scroll
$(window).scroll(function() {
if ($(this).scrollTop() >= 20) {
$('button').fadeIn(200);
} else {
$('button').fadeOut(200);
}
});
// Show hide top menu
$(document).ready(function(){
$(this).scrollTop(0);
$('button').click(function() {
$('#navigation').slideToggle('slow');
});

$('li').click(function () {
$('#navigation').slideUp('slow');
});
});
// Smooth scroling ( https://css-tricks.com/snippets/jquery/smooth-scrolling/ )
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
event.preventDefault();
}
}
});
});
//]]>
</script>

SAVE.

Demo & source Transform scroll to top button to: show menu on top: codepen.io/marioyiann/pen/ZGByoR

Happy to top \m/