<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark"> <div class="container"> <a class="navbar-brand page-scroll" href="#home">im</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <ul class="navbar-nav"> <li><a class="nav-item nav-link page-scroll active" href="#home">Home<span class="sr-only">(current)</span></a></li> <li><a class="nav-item nav-link page-scroll" href="#about">About</a></li> <li><a class="nav-item nav-link page-scroll" href="#portfolio">Portfolio</a></li> <li><a class="nav-item nav-link page-scroll disabled" href="#contact">Contact</a></li> </ul> </div> </div> </nav> <div class="jumbotron jumbotron-fluid"> <div class="container text-center"> <h1 class="display-4">I am</h1> <p class="lead">Web Programmer</p> </div> </div> <section id="about" class="about"> <div class="container"> <div class="row mb-4"> <div class="col text-center"> <h2>About</h2> </div> </div> <div class="row justify-content-center"> <div class="col-md-5 text-justify"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime soluta similique quae eum explicabo vel reprehenderit distinctio saepe temporibus ipsam, iste. Ullam magnam ducimus harum, consequuntur facilis, hic vero deleniti. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio assumenda at deserunt pariatur ratione rem delectus, nam, non? Temporibus dolor perferendis rerum quisquam nam accusamus nisi sunt facere! Doloribus, culpa.</p> </div> <div class="col-md-5 text-justify"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae corrupti, id at deserunt vitae obcaecati numquam! Veniam nihil dolores ex, minima, repellat, beatae ea rem velit repellendus natus adipisci. Nam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis ullam nesciunt molestiae nihil quam aliquid dolores a veritatis dolorem consectetur iste sint reiciendis accusamus praesentium odio, in similique? Natus, libero.</p> </div> </div> </div> </section> <section id="portfolio" class="portfolio bg-light pb-4"> <div class="container"> <div class="row mb-4 pt-4"> <div class="col text-center"> <h2>Portfolio</h2> </div> </div> <div class="row mb-4"> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div>' <div class="row mb-4"> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> <div class="col-md"> <div class="card"> <div class="card-body"> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> </div> </div> </div> </div> </div> </section> <section id="contact" class="contact mb-5"> <div class="container"> <div class="row pt-4 mb-4"> <div class="col text-center"> <h2>Contact Us</h2> </div> </div> <div class="row justify-content-center"> <div class="col-lg-4"> <div class="card text-white bg-primary mb-3 text-center"> <div class="card-body"> <h5 class="card-title">Contact Us</h5> <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, ut.</p> </div> </div> <ul class="list-group"> <li class="list-group-item"><h1>Location</h1></li> <li class="list-group-item">................</li> <li class="list-group-item">................</li> <li class="list-group-item">................</li> </ul> </div> <div class="col-lg-6"> <form> <div class="form-group"> <label for="nama">Nama</label> <input type="text" class="form-control" id="nama"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" id="email"> </div> <div class="form-group"> <label for="telp">No.Telp</label> <input type="text" class="form-control" id="telp"> </div> <div class="form-group"> <label for="pesan">Pesan</label> <textarea name="pesan" id="pesan" class="form-control"></textarea> </div> <div class="form"> <button type="button" class="btn btn-primary">Kirim Pesan</button> </div> </form> </div> </div> </div> </section> <footer class="bg-dark text-white"> <div class="container"> <div class="row pt-3"> <div class="col text-center"> <p>Copyright © 2018 I'm</p> </div> </div> </div> </footer> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>

// even pada saat link di klik $('a.page-scroll').on('click', function(e) { // ambil isi href var tujuan = $(this).attr('href'); // tangkap elemen ybs var elemenTujuan = $(tujuan); // pindahkan scroll $('html, body').animate({ scrollTop: elemenTujuan.offset().top - 50 }, 1250, 'swing'); e.preventDefault(); });