Js 버튼 클릭시 페이지 이동 - js beoteun keulligsi peiji idong

Question

HTML에서 페이지를 이동할 때는 보통 <a> 태그를 사용하여 링크를 만듭니다.

목차 Show

버튼 클릭시 페이지 이동하기
버튼 클릭시 다른 페이지를 새창에서 열기
달삼쓰뱉
1. HTML의 onclick 속성 사용
2. JavaScript 사용
3. addEventListener() 메소드 사용

그렇지만, 버튼을 클릭했을 때, 다른 페이지로 이동하고 싶다면 어떻게 해야할까요?

버튼 클릭시 페이지 이동하기

<input 
  id='go_home'    
  type='button'
  onclick='newPage()'
  value='이 버튼을 클릭하면 블로그 홈으로 이동합니다.' />

function newPage()  {
  window.location.href = 'https://hianna.tistory.com'
}

window.location.href = 'https://hianna.tistory.com';

버튼에 onclick 이벤트가 발생하면, newPage() 함수가 호출되고,

이 함수는

window.location.href 값을 새로운 페이지로 변경합니다.

window.location.href는 현재 열려 있는 페이지 주소를 담고 있는 속성입니다.

여기서는 페이지를 이동하기 위해 이 값을 바꾸어 주었습니다.

window.location의 다른 속성들에 대해 더 자세히 알고 싶다면

아래의 지난 포스팅을 참조하세요.

[Javascript] 현재 페이지 URL 가져오기

Javascript에서 현재 페이지의 URL 주소를 가져오는 방법을 소개합니다. window.location (Location 객체) 현재 페이지의 URL을 알아오기 위해 window.location 속성을 사용할 수 있습니다. window.location 속성..

hianna.tistory.com

버튼 클릭시 다른 페이지를 새창에서 열기

<input 
  id='go_home'    
  type='button'
  onclick='newPage()'
  value='이 버튼을 클릭하면 새탭(새창)에서 블로그홈이 열립니다' />

function newPage()  {
  window.open('https://hianna.tistory.com');
}

window.open('https://hianna.tistory.com');

window.open 함수는 첫번째 파라미터로 받은 url을 새창에서 열어줍니다.

현재 페이지에서 다른 페이지로 이동하기
onclick ="location.href='index.html'"
새 페이지에서 다른 페이지 열기
onclick ="window.open('index.html')"
현재 페이지 새로고침
onclick ="location.reload();"
뒤로 가기
onclick ="history.back();"
뒤로 1번 가기
onclick ="history.go(-1);"

예시)

<a href="#" onclick="history.back();">뒤로가기</a>

** history.back(), history.go(-1)이 보통은 잘 작동하나 안될시 return false; 를 삽입

(예시 onclick ="history.go(-1); return false;")

미리보기

버튼 클릭 하나만으로 웹 페이지의 상단으로 이동하는 기능을 구현해보겠습니다.

코드

<div class="moveTopBtn">맨 위로</div>

.moveTopBtn {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  width: 4rem;
  height: 4rem;
  background: #000;
  color: #fff;
 }

간단한 HTML 코드로 버튼을 만들어 줍니다. 대부분의 해당 버튼은 페이지 오른쪽 하단에 위치하기에 fixed 속성을 통해 고정시켜주었습니다.

const $topBtn = document.querySelector(".moveTopBtn");

// 버튼 클릭 시 맨 위로 이동
$topBtn.onclick = () => {
  window.scrollTo({ top: 0, behavior: "smooth" });  
}

버튼 DOM 객체를 불러와 onclick 이벤트를 걸어주고 클릭 시, 스크롤을 이동시키기 위한 window.scrollTo 메서드를 이용한 코드입니다.

페이지에서 특정 위치로 스크롤 이동시키기 위해서는 window.scrollTo 메서드를 사용하면 됩니다.

해당 메서드의 behavior: "smooth" 속성을 이용해 부드러운 이동을 구현할 수 있습니다.

https://gurtn.tistory.com/127

[JS] 페이지 내 특정위치로 스크롤 이동하기

페이지 내 특정 위치로 스크롤시키는 가장 쉬운 방법은 window.scrollTo 메서드를 사용하는 것입니다. 해당 메서드를 사용하는 방법과 이동 효과 설정, 속도 조절 방법에 대해 다뤄 보겠습니다. windo

gurtn.tistory.com

예제 코드

페이지 하단으로 이동

<div class="moveBottomBtn">맨 아래로</div>

const $bottomBtn = document.querySelector(".moveBottomBtn");

// 버튼 클릭 시 페이지 하단으로 이동
$bottomBtn.onclick = () => {
  window.scrollTo({ 
    top: document.body.scrollHeight, // <- 페이지 총 Height
    behavior: "smooth" 
  });
};

페이지 상단으로 이동하는 코드에서 window.scrollTo 메서드에 스크롤을 이동시킬 top 위치 값만 바꿔주면 쉽게 페이지 하단으로 이동할 수 있는 버튼을 제작할 수 있습니다.

달삼쓰뱉

참고: 자바스크립트 버튼 눌림 효과

html의 button을 클릭하면 onclick 이벤트가 발생합니다. 코드 작성자는 이를 활용해 버튼이 눌린 경우 javascript 코드를 실행하도록 할 수 있습니다. 이러한 onclick 이벤트를 받는 방법은 크게 세 가지로 html에서 직접 받기, javascript로 받기, addEventListener 활용하기 입니다.

1. HTML의 onclick 속성 사용

이 예제에서는 html onclick 속성을 사용해 javascript 함수를 할당하겠습니다. 웹사이트 사용자가 버튼을 클릭하면 그에 해당하는 함수가 실행될 것이고 화면에 alert 다이얼로그를 보일 것 입니다.

<!DOCTYPE html>
<html>

<body>
  <h2>버튼을 클릭해주세요</h2>

  <button onclick="doAction()">click me</button>

  <script>
    function doAction() {
      alert("Hello World");
    }  
  </script>
</body>

</html>

html button의 onclick 속성에 doAction() 함수를 할당하여 버튼이 눌린 경우 해당하는 스크립트를 실행하도록 했습니다.

결과:

주어진 버튼을 클릭하면 결과:

2. JavaScript 사용

이번에는 javascript의 onclick 이벤트를 사용해 보겠습니다. 웹사이트 사용자가 버튼을 누르면 그 버튼에 해당하는 javascript 코드가 실행되고 위의 예제와 동일하게 alert 다이얼로그가 뜨도록 하겠습니다.

<!DOCTYPE html>
<html>

<body>
  <h2>아래 버튼을 클릭해주세요</h2>

  <button id="my-button">안녕</button>

  <script>
    document.getElementById("my-button").onclick = function () {
      alert("Hello World");
    };
  </script>
</body>

</html>

위 코드에서는 my-button을 id로 가지는 html 항목을 javascript getElementById() 메소드로 가져와서 onclick에 지정한 스크립트를 할당했습니다.

결과:

안녕 버튼을 누르면:

3. addEventListener() 메소드 사용

이번 예제에서는 javascript의 addEventListener() 메소드를 사용하여 버튼에 click 이벤트를 추가할 것 입니다. 사용자가 버튼을 클릭하면 해당하는 javascript 코드가 실행되도록 해보겠습니다.

<!DOCTYPE html>
<html>

<body>
  <h2>배경색을 바꿔주세요</h2>

  <button id="my-button">버튼</button>

  <script>
    const myButton = document.getElementById("my-button");

    myButton.addEventListener('click', () => {
      document.body.style.backgroundColor = 'red';
    });
  </script>
</body>

</html>

위의 코드에서는 addEventListener() 메소드를 사용해 click 이벤트를 추가하고 해당하는 javascript 함수를 할당했습니다. 이번에는 alert 다이얼로그를 보이지 않고 배경을 빨간색으로 바꿨습니다.

결과:

버튼을 누르면:

정리

html:

<element onclick = "doAction()">

javascript:

object.onclick = function() { myScript };

addEventListener() 메소드를 사용한 javascript

object.addEventListener("click", myScript);

Js 버튼 클릭시 페이지 이동 - js beoteun keulligsi peiji idong

버튼 클릭시 페이지 이동하기

버튼 클릭시 다른 페이지를 새창에서 열기

달삼쓰뱉

1. HTML의 onclick 속성 사용

2. JavaScript 사용

3. addEventListener() 메소드 사용

정리

관련 글

관련 게시물

맥북 창 크기 조절 - maegbug chang keugi jojeol

Javascript 날짜에서 날짜 빼기 - javascript naljja-eseo naljja ppaegi

자바스크립트 지역변수 전역변수로 바꾸기 - jabaseukeulibteu jiyeogbyeonsu jeon-yeogbyeonsulo bakkugi

Js 타입 확인 - Js taib hwag-in

유니티 적 이동 - yuniti jeog idong

브라우저 JavaScript - beulaujeo JavaScript

일러스트 패턴 등록 - illeoseuteu paeteon deunglog

자바스크립트 map key - jabaseukeulibteu map key

다빈치 리졸브 자막 배경 - dabinchi lijolbeu jamag baegyeong

PokeMMO 하는 법 - PokeMMO haneun beob

광고하는

최근 소식

디젤 엔진오일 감소 - dijel enjin-oil gamso

마비노기 밀 인형 - mabinogi mil inhyeong

을 보니 grammar - eul boni grammar

젤다 드래곤 안나옴 - jelda deulaegon annaom

전자담배 간접흡연 디시 - jeonjadambae ganjeobheub-yeon disi

파이썬 입력값이 정수가 아니면 에러 출력하고 다시 입력받기 - paisseon iblyeoggabs-i jeongsuga animyeon eleo chullyeoghago dasi iblyeogbadgi

독수리 오형제 결말 - dogsuli ohyeongje gyeolmal

타이어 공기압 보는 법 - taieo gong-giab boneun beob

정화조 20 인용 - jeonghwajo 20 in-yong

교육청 태블릿 초기화 - gyoyugcheong taebeullis chogihwa

광고하는

포퓰러

광고하는

에 대한

합법적인

돕다

사회의