Make Scroll to Top use Link on Menu Navigation - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Scroll to Top use Link on Menu Navigation, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article HTML, Article Javascript, Article jQuery, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Scroll to Top use Link on Menu Navigation
link : Make Scroll to Top use Link on Menu Navigation

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/

Thus articles Make Scroll to Top use Link on Menu Navigation

that is all articles Make Scroll to Top use Link on Menu Navigation This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Scroll to Top use Link on Menu Navigation with the link address https://autopostingblogspot.blogspot.com/2015/06/make-scroll-to-top-use-link-on-menu.html