간단한 페이지 이동소스
- 퍼블리셔/javascript
- 2009. 10. 9. 09:00
블로그를 하다보니 이것 저것 자바스크립트 소스를 찾게 됩니다.
이전에 상하이동소스를 쓴적이 있습니다. 이것도 상당이 유용합니다. 본문 아무곳에서나 떠블클릭으로 이동을 하는 소스지요.
하지만 단점이 있었습니다.
원하는 곳으로 빨리 이동하는것을 찾기시작했습니다.
그것도 간단이....
전 css, html, 자바스크립트 잘 모릅니다. 그래서 간단하고 원하는 소귀의 목적만 이루면 되지요.
웹 써핑중 좋은것을 발견하고는 마구 적용을 해봤습니다.
3가지만 알면 얼마든지 활용가능합니다.
이동 자바스크립트는 이거입니다.
원하는 위치에 이름을 정해주세요.
페이지 맨위면 <a name="top"></a>
페이지 아래면 <a name="bottom"></a>
댓글창이면 <a name="comment"></a>
즉 top , bottom , comment 는 마음대로 정하면 됩니다. 가고 싶은곳과 연관이 있는 것을 정하면 됩니다.
이렇게 정한 이름을 원하는곳에 삽입하면 그곳에 그위치라는것이 정해집니다.
그다음 가고 싶은곳을 정합니다.
페이지 맨위면 <a href="#top">맨위로 이동</a>
페이지 맨아래면 <a href="#bottom">아래로 이동</a>
댓글창이면 <a href="#comment">댓글창으로 이동</a>
자 이제 응용을 해보겠습니다.
제 경우 컨텐츠가 시작되는곳에 넣어보겠습니다. 더 위에 넣을분은 치환자를 찾거나, <body>바로 아래 넣어도 됩니다. 스킨에 어울리도록 넣은것이 중요할듯 합니다.
전 페이지 맨아래에 최상단으로 가능 위로이동 스크립트가 있어서 컨텐츠 상단으로 정했습니다.
스킨편집에서 <div id="content"> 를 찾아서 그 아래에 넣습니다.
<a name="top"></a> ...............................는 여기가 top 라고 위치를 정한것입니다.
<a href="#bottom">아래로 이동</a> .........는 아래로 이동 텍스트 이라는 메뉴가 나오는겁니다.
<a href="#comment">댓글창으로 이동</a> .....는 댓글창으로 이동 이라는 텍스트메뉴가 나오는겁니다.
전 <>를 사용했습니다. 이미지를 보시죠.
마찬가지로 치환자를 찾아서 원하는 곳에 삽입하세요.
저는 자바스크립트 잘 모릅니다. 더 상세한 설명을 주실분이나, 잘못된 점이 있으면 댓글로 알려주시길 바랍니다.
참고로 익스플로러 8, 파이어폭스,크롬,오페라 최신버젼으로 봤을때 잘 작동했습니다.
한가지 더
아래소스를 페이지 아래부분에 삽입하면 끝
<a href="#" onfocus='this.blur()'><span class="text">!!! 위로이동 !!!</span></a>
이전에 상하이동소스를 쓴적이 있습니다. 이것도 상당이 유용합니다. 본문 아무곳에서나 떠블클릭으로 이동을 하는 소스지요.
하지만 단점이 있었습니다.
원하는 곳으로 빨리 이동하는것을 찾기시작했습니다.
그것도 간단이....
전 css, html, 자바스크립트 잘 모릅니다. 그래서 간단하고 원하는 소귀의 목적만 이루면 되지요.
웹 써핑중 좋은것을 발견하고는 마구 적용을 해봤습니다.
3가지만 알면 얼마든지 활용가능합니다.
이동 자바스크립트는 이거입니다.
<onclick="window.location.href">
위치 이름 정하기 <a name="이름"></a>
원하는 위치에 이름을 정해주세요.
페이지 맨위면 <a name="top"></a>
페이지 아래면 <a name="bottom"></a>
댓글창이면 <a name="comment"></a>
즉 top , bottom , comment 는 마음대로 정하면 됩니다. 가고 싶은곳과 연관이 있는 것을 정하면 됩니다.
이렇게 정한 이름을 원하는곳에 삽입하면 그곳에 그위치라는것이 정해집니다.
그다음 가고 싶은곳을 정합니다.
이동하고자 하는곳 정하기 <a href="#이름"></a>
페이지 맨위면 <a href="#top">맨위로 이동</a>
페이지 맨아래면 <a href="#bottom">아래로 이동</a>
댓글창이면 <a href="#comment">댓글창으로 이동</a>
자 이제 응용을 해보겠습니다.
제 경우 컨텐츠가 시작되는곳에 넣어보겠습니다. 더 위에 넣을분은 치환자를 찾거나, <body>바로 아래 넣어도 됩니다. 스킨에 어울리도록 넣은것이 중요할듯 합니다.
전 페이지 맨아래에 최상단으로 가능 위로이동 스크립트가 있어서 컨텐츠 상단으로 정했습니다.
스킨편집에서 <div id="content"> 를 찾아서 그 아래에 넣습니다.
<onclick="window.location.href">
<a name="top"></a>
<a href="#bottom">아래로 이동</a>
<a href="#comment">댓글창으로 이동</a>
<a name="top"></a>
<a href="#bottom">아래로 이동</a>
<a href="#comment">댓글창으로 이동</a>
<a name="top"></a> ...............................는 여기가 top 라고 위치를 정한것입니다.
<a href="#bottom">아래로 이동</a> .........는 아래로 이동 텍스트 이라는 메뉴가 나오는겁니다.
<a href="#comment">댓글창으로 이동</a> .....는 댓글창으로 이동 이라는 텍스트메뉴가 나오는겁니다.
전 <>를 사용했습니다. 이미지를 보시죠.
마찬가지로 치환자를 찾아서 원하는 곳에 삽입하세요.
저는 자바스크립트 잘 모릅니다. 더 상세한 설명을 주실분이나, 잘못된 점이 있으면 댓글로 알려주시길 바랍니다.
참고로 익스플로러 8, 파이어폭스,크롬,오페라 최신버젼으로 봤을때 잘 작동했습니다.
한가지 더
페이지 최상단으로 가는 간단한 스크립트
아래소스를 페이지 아래부분에 삽입하면 끝
<a href="#" onfocus='this.blur()'><span class="text">!!! 위로이동 !!!</span></a>
스킨 ,태그, 자바스크립트 등 관련글입니다.
- 애드센스 최적화 본문 중간에 원하는대로 삽입하기
- 한줄공지창 마퀴태그
- 블로그에 써먹는 간단한 드롭다운메뉴
- [티스토리 스킨]사이드바 관리,배경
- 타이틀 제목 플래시 물결로 만들기
- 자바스크립트 에러 잡기
- [티스토리 스킨팁] more less 꾸미기
- 티스토리 꾸미기 팁 정리
- [티스토리 스킨] 카테고리 펼쳐보이기/원하는 카테고리만 펼쳐보이기/더보기 기능
- 사이드바 링크관리팁
- 구글 애드센스(Adsense)시작 광고만들기
- 링크에 표시를 달자
- 용의자 심플 3단스킨변경 다음,믹시위젯 일렬로배치
- 다음 블로그뉴스 추천버튼 작게만들기
- 메타사이트 추천버튼 배너모음