// *** Created by Tolga Çelik *** // window.smoothScroll = function (target) { var scrollContainer = target; do { //find scroll container scrollContainer = scrollContainer.parentNode; if (!scrollContainer) return; scrollContainer.scrollTop += 1; } while (scrollContainer.scrollTop == 0); var targetY = 0; do { //find the top of target relatively to the container if (target == scrollContainer) break; targetY += target.offsetTop; } while (target = target.offsetParent); scroll = function (c, a, b, i) { i++; if (i > 30) return; c.scrollTop = a + (b - a) / 30 * i; setTimeout(function () { scroll(c, a, b, i); }, 20); } // start scrolling scroll(scrollContainer, scrollContainer.scrollTop, targetY, 0); }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-MfvZlkHCEqatNoGiOXveE8FIwMzZg4W85qfrfIFBfYc= sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> <div> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">tolgacelik.NET</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" target="_blank" style="color:white;" href="http://tolgacelik.net/">tolgacelik.NET</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li><a onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe">Yukarı Çık <span class="sr-only">(current)</span></a></li> <li><a onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1">Bölge 1</a></li> <li><a onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2">Bölge 2</a></li> <li><a onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3">Bölge 3</a></li> <li><a onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4">Bölge 4</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Ara"> </div> <button type="submit" class="btn btn-default">Ara</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a target="_blank" href="http://tolgacelik.net/">Blog</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hesap İşlemleri<span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Giriş</a></li> <li><a href="#">Kayıt Ol</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div> <!-- Tepe --> <div id="tepe"> <div class="jumbotron"> <div style="margin:0 auto;width:1000px;"> <h1>tolgacelik.NET</h1> <p>Hoşgeldiniz, bu bir tek sayfa kayan menü örneğidir,</p> <p>yukarıdaki menü veya buttonlar aracılığı ile, bölgeler arasında geçiş yapabilirsiniz..</p> <h2>|-- Giriş Bölümü "Tepe" --|</h2> <p> <a class="btn btn-primary btn-lg" onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe" role="button">Tepe</a> <a class="btn btn-success btn-lg" onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1" role="button">Bölge 1</a> <a class="btn btn-info btn-lg" onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2" role="button">Bölge 2</a> <a class="btn btn-danger btn-lg" onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3" role="button">Bölge 3</a> <a class="btn btn-warning btn-lg" onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4" role="button">Bölge 4</a> </p> </div> </div> </div> <!-- Tepe Son --> <!-- Bölge 1 --> <div id="bolge1"> <div class="jumbotron"> <div style="margin:0 auto;width:1000px;"> <h1>tolgacelik.NET</h1> <p>Yukarıdaki menü veya buttonlar aracılığı ile, bölgeler arasında geçiş yapabilirsiniz..</p> <h2>|-- Bölge 1 --|</h2> <p> <a class="btn btn-primary btn-lg" onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe" role="button">Tepe</a> <a class="btn btn-success btn-lg" onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1" role="button">Bölge 1</a> <a class="btn btn-info btn-lg" onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2" role="button">Bölge 2</a> <a class="btn btn-danger btn-lg" onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3" role="button">Bölge 3</a> <a class="btn btn-warning btn-lg" onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4" role="button">Bölge 4</a> </p> </div> </div> </div> <!-- Bölge 1 Son --> <!-- Bölge 2 --> <div id="bolge2"> <div class="jumbotron"> <div style="margin:0 auto;width:1000px;"> <h1>tolgacelik.NET</h1> <p>Yukarıdaki menü veya buttonlar aracılığı ile, bölgeler arasında geçiş yapabilirsiniz..</p> <h2>|-- Bölge 2 --|</h2> <p> <a class="btn btn-primary btn-lg" onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe" role="button">Tepe</a> <a class="btn btn-success btn-lg" onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1" role="button">Bölge 1</a> <a class="btn btn-info btn-lg" onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2" role="button">Bölge 2</a> <a class="btn btn-danger btn-lg" onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3" role="button">Bölge 3</a> <a class="btn btn-warning btn-lg" onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4" role="button">Bölge 4</a> </p> </div> </div> </div> <!-- Bölge 2 Son --> <!-- Bölge 3 --> <div id="bolge3"> <div class="jumbotron"> <div style="margin:0 auto;width:1000px;"> <h1>tolgacelik.NET</h1> <p>Yukarıdaki menü veya buttonlar aracılığı ile, bölgeler arasında geçiş yapabilirsiniz..</p> <h2>|-- Bölge 3 --|</h2> <p> <a class="btn btn-primary btn-lg" onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe" role="button">Tepe</a> <a class="btn btn-success btn-lg" onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1" role="button">Bölge 1</a> <a class="btn btn-info btn-lg" onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2" role="button">Bölge 2</a> <a class="btn btn-danger btn-lg" onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3" role="button">Bölge 3</a> <a class="btn btn-warning btn-lg" onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4" role="button">Bölge 4</a> </p> </div> </div> </div> <!-- Bölge 3 Son --> <!-- Bölge 4 --> <div id="bolge4"> <div class="jumbotron"> <div style="margin:0 auto;width:1000px;"> <h1>tolgacelik.NET</h1> <p>Yukarıdaki menü veya buttonlar aracılığı ile, bölgeler arasında geçiş yapabilirsiniz..</p> <h2>|-- Bölge 4 --|</h2> <p> <a class="btn btn-primary btn-lg" onclick="smoothScroll(document.getElementById('tepe'))" href="#tepe" role="button">Tepe</a> <a class="btn btn-success btn-lg" onclick="smoothScroll(document.getElementById('bolge1'))" href="#bolge1" role="button">Bölge 1</a> <a class="btn btn-info btn-lg" onclick="smoothScroll(document.getElementById('bolge2'))" href="#bolge2" role="button">Bölge 2</a> <a class="btn btn-danger btn-lg" onclick="smoothScroll(document.getElementById('bolge3'))" href="#bolge3" role="button">Bölge 3</a> <a class="btn btn-warning btn-lg" onclick="smoothScroll(document.getElementById('bolge4'))" href="#bolge4" role="button">Bölge 4</a> </p> </div> </div> </div> <!-- Bölge 4 Son -->
@charset "utf-8"; /* CSS Document */ #tepe{ margin:0 auto; padding:100px; height:700px; background-color:#337ab7; } #bolge1{ margin:0 auto; padding:100px; height:700px; background-color:#5cb85c; } #bolge2{ margin:0 auto; padding:100px; height:700px; background-color:#5bc0de; } #bolge3{ margin:0 auto; padding:100px; height:700px; background-color:#d9534f; } #bolge4{ margin:0 auto; padding:100px; height:700px; background-color:#f0ad4e; }