프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] a 태그를 클릭하여 해당 ID로 작동 이동하는 소스

2021.12.02
북마크 작성자 정보
http://relation.co.kr/images_board/board_system_publishing/171/index.php


<a href="ID"> 를 클릭하여 해당 <div id="ID">로 animation 하는 소스

SCRIPT
<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script>
    $(document).ready(function(){
        $('.nav > a').on("click", function(e){
            e.preventDefault();
			var $this = $(this);
			var nav_name = $this.attr('href').split('#');
			var nav_name = nav_name[1]; 
			//console.log(nav_name);
			$('html, body').animate( {scrollTop:$("#"+nav_name).offset().top},500);
        });
    });
</script>

CSS
<style>
    .wrap   {	display:block; width:100%;   }
    .nav 	{	display:block;	transform:translate(0,-50%); position:fixed; top:50%; right:20px; width:25px; height:126px; text-align:center; background-color:#ccc; border-radius:13px;  }
    .nav a  {	display:block;	width:15px;	height:15px;	border-radius:7px; background-color:#fff; margin:5px 0 10px 5px; }
    .step01 {	display:block;	width:100%; height:800px;	background-color:#ececec; }
    .step02 {	display:block;	width:100%; height:800px;	background-color:#fff; }
    .step03 {	display:block;	width:100%; height:800px;	background-color:#ececec; }
    .step04 {	display:block;	width:100%; height:800px;	background-color:#fff; }
    .step05 {	display:block;	width:100%;	height:800px;	background-color:#ececec; }    
	.footer	{	display:block;	width:100%;	height:300px;	background-color:#333333; }
</style> 

HTML
<body>
    <div class="wrap">
        <div class="nav">
            <a href="#step01"></a>
			<a href="#step02"></a>
			<a href="#step03"></a>
			<a href="#step04"></a>
			<a href="#step05"></a>
        </div>
        <div class="step01" id="step01">step01</div>
        <div class="step02" id="step02">step02</div>
        <div class="step03" id="step03">step03</div>
        <div class="step04" id="step04">step04</div>
        <div class="step05" id="step05">step05</div>
		<div class="footer">footer</div>
    </div>
</body>


 

이 포스트 공유하기

전체목록