SPSTRAP Document API

Preview icon - xs

<a name="sample-nametag">갈고리 태그 위치</a>
                            <div>
                                <img src="https://placeholder.pics/svg/800x200">
                            </div>
                            <div id="sample-element">
                                <img src="https://placeholder.pics/svg/800x201">
                            </div>
                            <div class="sample-class">
                                <img src="https://placeholder.pics/svg/800x202">
                            </div>
                            <button class="sp--goto-btn" data-target="0">최 상단으로 이동</button>
                            <button class="sp--goto-btn" data-target="-1">최 하단으로 이동</button>
                            <button class="sp--goto-btn" data-target="sample-nametag" data-speed="300">갈고리 태그로 이동</button>
                            <button class="sp--goto-btn" data-target="#sample-element" data-gap="-50">특정 id로 이동</button>
                            <button class="sp--goto-btn" data-target=".sample-class" data-gap="50">특정 class로 이동</button>

Class

name	description
.sp--goto-btn	goto 버튼

Attribute

name	description
.data-target	4 type <!--// data-target="[100]" // 숫자로 입력하면 상단에서 숫자만큼 떨어진곳에 도착. data-target="[0]" // 0 = 최상단으로 이동 data-target="[-1]" // -1 = 최하단으로 이동 data-target="[sample-nametag]" // <a name="sample-nametag">갈고리 태그로 도착</a> data-target="[#sample-element]" // <a id="sample-element">id로 도착</a> data-target="[.sample-class]" // <a class="sample-class">class로 도착</a> //-->
.data-speed	default : css.duration ( var.js ) 두 타입만 존재한다. 0 or 그 이상의 숫자. ( 0의 경우 딜레이 없이 바로 이동한다. ) 숫자가 아닌 모든 타입은 css.duration ( var.js ) 로 종속된다. <!--// data-speed="[0]" // 딜레이 없이 이동 data-target="[ㅋㅋ]" // css.duration data-target="[3000]" // 3초간 이동 //-->
.data-gap	default : 0 ( int ) 대상 요소로 이동할 때 특정 값만큼 더 이동하거나, 덜 이동하게 한다. 대부분 이런 경우는 마크업이 올바르지 않은 경우 트릭으로 이용하는 경우다. 숫자를 합산하므로, -30은 위로 30px만큼 더 올라가고, 100은 아래로 100만큼 더 내려간다.

Etc

Etc description field