인페이지 점프
인페이지 점프란?
페이지내(싱글 페이지등으로 사용하기 편리함)로 갱신하지 않고 다운스크롤로 지정한 요소에 날려 주는 기능.
⚠️아래의 「여기를 클릭!」은 화상이기 때문에 실제로 눌릴 수 없습니다
누룻과 지정된 요소에 ⬇️
HTML 설명
점프 버튼<a href="#sample">ここをクリック！</a>
점프 대상 (앵커)<h2 id="sample">これは見出しです。</h2>
코드로 사용법 설명
sample.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<h1>page内ジャンプの使い方</h1>
<p>
<a href="#link">クリックすると飛びます</a>
</p>
<p style="padding-top: 1000px">
<a name="link">ジャンプ先です</a>
</p>
</body>
</html>
비행 속도 (스크롤 속도) 조정
①HTML
html<a href='#target'>Topへ戻る</a>
②jQuery
jQuery// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
//デフォルトのイベントをキャンセル
event.preventDefault();
// 移動先となる要素を取得します。
var target = $(this.hash);
if (!target.length) return;
// 移動先の位置を取得します
var targetY = target.offset().top;
// animateで移動します
$('body').animate({scrollTop: targetY}, 500, 'swing');
});
속도 조정
jQueryvar targetY = target.offset().top - 50;
배속으로 스크롤
jQuery$('body').animate({scrollTop: targetY}, 1000, 'swing');
화면내 스크롤은 싱글 페이지로 꽤 사용할 수 있고, UI의 사용성을 생각한 훌륭한 기술이므로 추천입니다!
Reference
이 문제에 관하여(인페이지 점프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sagawashu/items/b02bc8bbe9a510318374
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
점프 버튼
<a href="#sample">ここをクリック！</a>
점프 대상 (앵커)
<h2 id="sample">これは見出しです。</h2>
코드로 사용법 설명
sample.html<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<h1>page内ジャンプの使い方</h1>
<p>
<a href="#link">クリックすると飛びます</a>
</p>
<p style="padding-top: 1000px">
<a name="link">ジャンプ先です</a>
</p>
</body>
</html>
비행 속도 (스크롤 속도) 조정
①HTML
html<a href='#target'>Topへ戻る</a>
②jQuery
jQuery// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
//デフォルトのイベントをキャンセル
event.preventDefault();
// 移動先となる要素を取得します。
var target = $(this.hash);
if (!target.length) return;
// 移動先の位置を取得します
var targetY = target.offset().top;
// animateで移動します
$('body').animate({scrollTop: targetY}, 500, 'swing');
});
속도 조정
jQueryvar targetY = target.offset().top - 50;
배속으로 스크롤
jQuery$('body').animate({scrollTop: targetY}, 1000, 'swing');
화면내 스크롤은 싱글 페이지로 꽤 사용할 수 있고, UI의 사용성을 생각한 훌륭한 기술이므로 추천입니다!
Reference
이 문제에 관하여(인페이지 점프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sagawashu/items/b02bc8bbe9a510318374
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
</head>
<body>
<h1>page内ジャンプの使い方</h1>
<p>
<a href="#link">クリックすると飛びます</a>
</p>
<p style="padding-top: 1000px">
<a name="link">ジャンプ先です</a>
</p>
</body>
</html>
①HTML
html
<a href='#target'>Topへ戻る</a>
②jQuery
jQuery
// ページ内リンクのみ取得します。
$('a[href^=#]').click(function(){
//デフォルトのイベントをキャンセル
event.preventDefault();
// 移動先となる要素を取得します。
var target = $(this.hash);
if (!target.length) return;
// 移動先の位置を取得します
var targetY = target.offset().top;
// animateで移動します
$('body').animate({scrollTop: targetY}, 500, 'swing');
});
속도 조정
jQuery
var targetY = target.offset().top - 50;
배속으로 스크롤
jQuery
$('body').animate({scrollTop: targetY}, 1000, 'swing');
화면내 스크롤은 싱글 페이지로 꽤 사용할 수 있고, UI의 사용성을 생각한 훌륭한 기술이므로 추천입니다!
Reference
이 문제에 관하여(인페이지 점프), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sagawashu/items/b02bc8bbe9a510318374텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
