Javascript는 블로그 오른쪽 하단에 맨 위로 돌아가기 버튼을 구현합니다. page_javascript 기술

블로그 가든의 많은 블로거들은 자신의 블로그 페이지 오른쪽 하단에 아이콘을 가지고 있는데, 화면을 아무리 늘려도 항상 오른쪽 하단에 남아있습니다. 페이지를 상단에 고정하려면 클릭하세요. 이 효과를 얻으려면 나중에 데모를 작성해 보세요.

1. 아이콘 오른쪽 하단이 고정됩니다.

　 1.SS는 4가지 레이아웃 방법을 제공합니다. 고정이란 절대 위치에 있는 요소를 의미합니다. 그래서 우리는 아이콘 고정을 달성하기 위해 고정 사용을 선택합니다.

절대

absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치가 지정된 절대 위치 지정 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다. 고정 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다. 친척 정상 위치를 기준으로 상대적으로 배치된 요소를 생성합니다. 따라서 "left:20"은 요소의 왼쪽 위치에 20픽셀을 추가합니다. 정적 기본값. 위치 지정이 없으면 요소는 일반 흐름(상단, 하단, 왼쪽, 오른쪽 또는 Z-색인 선언 무시)으로 나타납니다. 상속 는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

2. 코드는 다음과 같습니다. 버튼 버튼은 항상 화면 오른쪽 하단에 배치됩니다. 상단 및 하단 정밀도 막대를 드래그하거나 브라우저 창 크기를 늘리거나.

코드 복사 코드는 다음과 같습니다.

#myTopBtn{
하단: 5px;
          오른쪽: 5px;
위치:고정;
}

2. 클릭 후 페이지 상단으로 돌아갑니다.

1. 화면 상단으로 돌아가고 싶다면 자바스크립트에서 스크롤바이(scrollby)와 스크롤(scroll) 메소드를 제공하여 드래그바를 상하로 움직이는 방법을 알아야 합니다.

코드 복사 코드는 다음과 같습니다.

window.scrollBy(0,-30) //화면을 30픽셀 위로 이동
window.scroll(0,0) // 화면을 상단으로 되돌립니다

2. 위에서 드래그 바를 이동하는 방법을 언급했는데, 특정 속도로 페이지 상단으로 이동하는 방법은 다음과 같습니다. 그런 다음 setInterval 및clearInterval 메소드를 사용하여 10밀리초마다 화면을 30픽셀씩 위로 이동해야 합니다.

코드 복사 코드는 다음과 같습니다.

맨 위로

코드 복사 코드는 다음과 같습니다.

var myVar;
함수 TopFunc(){
MyVar=setInterval(EachScrollBy,10)
}

함수 EachScrollBy(eachHeight){
If(document.documentElement.scrollTop<=0){
              clearInterval(myVar);
         }그 외{
              window.scrollBy(0,-30);
}
}

3. 확장

핀버튼을 구현했습니다. 그렇다면 버튼을 클릭하면 화면이 하단에 표시된다는 것을 어떻게 알 수 있을까요? 사실 원리는 비슷하므로 여기서는 데모를 작성하지 않겠습니다. 참조할 수 있도록 몇 가지 속성을 제공하세요.

코드 복사 코드는 다음과 같습니다.

웹 페이지의 가시 영역 너비: document.body.clientWidth
웹 페이지 가시 영역 높이: document.body.clientHeight
웹 페이지의 표시 영역 너비: document.body.offsetWidth (옆선 너비 포함)
웹 페이지의 가시 영역 높이 : document.body.offsetHeight (가장자리 너비 포함)
웹페이지 본문 전체 텍스트 너비: document.body.scrollWidth
웹 페이지 본문의 전체 텍스트 높이: document.body.scrollHeight
스크롤되는 페이지의 높이: document.body.scrollTop
스크롤되는 웹페이지의 왼쪽: document.body.scrollLeft
웹페이지 본문: window.screenTop
웹페이지 본문 왼쪽 부분: window.screenLeft
높은 화면 해상도: window.screen.height
화면 해상도 너비: window.screen.width
화면 사용 가능 작업 영역 높이: window.screen.availHeight
화면 사용 가능 작업 영역 너비: window.screen.availWidth

위 내용은 이 글의 전체 내용입니다. 블로그를 좋아하는 아이들이 좋아했으면 좋겠습니다.