jQuery 스크롤 탑 컨트롤 - scrolltop control

Open API/Jquery|2016.11.10 09:37

원본 Url : http://www.xpressengine.com/?mid=download&package_srl=21842038

Test Url : http://www.uhoon.co.kr/test/1183.html

지정된 스크롤 위치 이하로 내려가게 되면 

스크롤탑 컨트롤이 나타나서 클릭시 페이지 상단으로 올라갑니다..

<!doctype html>
<meta charset="utf-8" />
<title>scrolltop control </title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
    h1 { font-size: 34px; line-height: 1.2; margin: 0.3em 0 10px; }
    span{width:48px;height:48px;display:block;background:url("/test/1183/top.png") top no-repeat;margin:0px
    15px 10px 0;border-radius:3px;-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;-ms-transition:all 0.2s ease-out;transition:all 0.2s ease-out}#scrolltotop a:hover
    span{background:url("/test/1183/top.png") bottom no-repeat}
<script type="text/javascript">
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
            } else {
        $('#scrolltotop a').click(function () {
                scrollTop: 0
            }, 1000);
            return false;
<div id="scrolltotop" style="display: block;"><a href="#top"><span></span></a></div>
<div style="height:3200px;">a</div>


Smooth Scroll - 부드러운 스크롤 이동 ( 속도 , 위치 셋팅)

Open API/Jquery|2016.11.01 09:14

지정위치로 스크롤바를 부드럽게 이동 시켜줍니다.


PlugIn Url : http://github.com/kswedberg/jquery-smooth-scroll

샘플 코드 다운로드 :   904.zip



* 옵션 값

  offset: 0,
  // one of 'top' or 'left'
  direction: 'top',
  // only use if you want to override default behavior
  scrollTarget: null,
  // fn(opts) function to be called before scrolling occurs.
  // `this` is the element(s) being scrolled
  beforeScroll: function() {},
  // fn(opts) function to be called after scrolling occurs.
  // `this` is the triggering element
  afterScroll: function() {},
  easing: 'swing',
  speed: 400,
  // coefficient for "auto" speed
  autoCoefficent: 2

* 샘플 코드
<!doctype html>
<html lang="en">
<meta charset="utf-8" />  
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> 
<script src="/test/904/jquery.smooth-scroll.js"></script> 
a {
  color: #8ad459;
  text-decoration: none;
<script type="text/javascript">
$(document).ready(function($) {
        speed: 1000,
        easing: 'easeInOutCubic'
<div style="position: fixed; top:50px;background: #fff"> 
<ul style="list-style: none;">
<li><a href="#Red" >Red</a></li>
<li><a href="#blue">blue</a></li>
<li><a href="#pink">pink</a></li> 
<div style="background-color:red;height:400px;" id="Red"> </div>
<div style="background-color:blue;height:400px;" id="blue"/> </div>
<div style="background-color:pink;height:400px;" id="pink"/> </div> 
<div style="height:300px;"></div>