위로 스크롤 버튼

Question

나는 스스로를 "얼마나 위대한"tumblr "scroll to top"버튼으로 생각하고 있었다. 그리고 Deviantart가 그런 버튼을 가지고 있지 않다는 것을 얼마나 빨려 들었는지 스스로 생각하고있었습니다. 이제는 키보드의 "집"버튼을 눌러 페이지 맨 위로 쉽게 스크롤 할 수 있습니다. 하지만 너무 바빠서 스크롤하는 경우에는 어떻게해야합니까? 아니면 단순히 키보드로 소란스럽지 않으려 고합니다.

음, 나는 내가하고 싶은 것과 비슷한 기능을 제공하는 chrome extension을 발견했습니다. 그것은 4Chan을위한 맨 위 버튼으로의 스크롤 이었지만, Deviantart를 대신 사용하기 위해 manifest, json을 수정했습니다. 하지만 코드에 문제가 있습니다.

사용자가 화면에서 100px 이상 스크롤 한 경우에만 버튼이 표시됩니다. 나는 또한 tumblr이 스크롤하는 것과 비슷한 일종의 애니메이션 스크롤을 원합니다.하지만 꼭 필요한 것은 아닙니다.

하지만 지금은 페이지 맨 오른쪽에 고정 버튼을 표시합니다.이 버튼은 페이지 맨 아래에있을 때만 클릭 할 수 있습니다. 그래서 어떤 생각을 환영합니다,

/* 
* scroll to top button for deviantart 
* 
*/ 


function loadButton() 
{ 
    button = document.createElement("IMG"); 
    button.setAttribute("onclick", "scrollTo(0)"); 
    button.setAttribute("onmouseover", "this.style.opacity = '1'"); 
    button.setAttribute("onmouseout", "this.style.opacity = '0.4'"); 
    button.src = chrome.extension.getURL("images/scroll-to-top.png"); 
    button.style.position = "fixed"; 
    button.style.right = "10px"; 
    button.style.top = "10px"; 
    button.style.width = "75px"; 
    button.style.height = "75px"; 
    button.style.opacity = "0.4"; 
    document.body.appendChild(button); 
} 


loadButton(); 

내가 아주 최소한의 자바 스크립트 지식을 가지고 :

다음은 main.js 코드입니다!

ALSO, A QUICK 면책 조항 : 기본 코드는 내 것이 아니므로 배포 할 생각은 없습니다. 내 개인적인 용도로 코드를 작성하려고합니다.

Answer 1

이 코드를 loadButton 기능의 끝에 넣으십시오. 사용자가 100px를 지나쳤는지 여부에 따라 버튼을 숨기거나 표시합니다.

window.onscroll = function() { 
    if (document.documentElement.scrollTop > 100) { 
     button.style.display = "inline"; 
    } else { 
     button.style.display = "none"; 
    } 
} 

애니메이션을 사용하지는 않지만 jQuery 부드러운 스크롤링 플러그인을 사용해 볼 수 있습니다.