Перейти к началу страницы

Question

Я подумал про себя, насколько велика кнопка «прокрутка вверх». И тогда я тоже подумал о том, как сильно он сосал, что у Deviantart нет такой кнопки. Теперь я знаю, что я могу легко прокручивать верхнюю часть страницы, нажимая кнопку «home» на моей клавиатуре. Но что, если я слишком занят прокруткой? Или я просто не хочу суетиться с моей клавиатурой?

Ну, я нашел chrome extension, который предлагает аналогичную функцию тому, что я хочу делать. Это был свиток к верхней кнопке для 4Chan, но я адаптировал манифест, json, чтобы использовать Deviantart. НО, есть проблема с кодом.

Что я хочу, чтобы кнопка была доступна, отображается только в том случае, если пользователь прокручивал более 100 пикселей на экране. Я также хотел бы, чтобы там был какой-то анимированный свиток, похожий на свитки tumblr, но это не обязательно.

Но то, что он сейчас делает, показывает статическую кнопку в правом верхнем углу страницы, которую я могу щелкнуть, только когда я нахожусь в нижней части страницы.

Вот код main.js:

/* 
* 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(); 

У меня есть очень минимальное яваскрипта знания, поэтому любые мысли приветствуются!

ТАКЖЕ, БЫСТРЫЙ ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Базовый код не мой, и поэтому я не собираюсь его распространять. Я ищу код для моего личного использования, и только это.

Answer 1

Поместите этот код в конец своей функции loadButton. Он скрывает/показывает кнопку в зависимости от того, прокручивается ли пользователь за 100 пикселей.

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

Это не анимация, но для этого вы можете попробовать плагин с плавным прокруткой jQuery.