Динамически показать / скрыть кнопку сверху наверх с помощью JavaScript

Question

Динамически показать / скрыть кнопку сверху наверх с помощью JavaScript

0

Мне сложно найти фрагмент кода Javascript для динамического отображения кнопки "Назад к началу", когда пользователь прокручивает, скажем, более 1000 пикселей. Все примеры используют jQuery, и я не могу использовать jQuery. Любая помощь будет очень оценена.

andreszs 10 янв. 2014, в 00:06

Источник

0

Вы пытались разорвать плагин jquery, на который вы смотрели? Я работал над старым проектом, который не мог использовать jquery, поэтому я просто выпотрошил все jquery и сделал его чистым js.
DeadlyChambers 09 янв. 2014, в 22:42

Теги:

javascript

html

2 ответа

1

JavaScript с использованием Window.onscroll

    var appended = false, bookmark = document.createElement("div");
bookmark.id = "arrowUp";
bookmark.innerHTML = "<a href=\"#\" title=\"Top of the page.\">&uarr;<\/a>";

onscroll = function() {
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  if (scrollTop > 500) {
    if (!appended) {
      document.body.appendChild(bookmark);
      appended = true;
    }
  } else {
    if (appended) {
      document.body.removeChild(bookmark);
      appended = false;
    }
  }
};

источник

https://developer.mozilla.org/en-US/docs/Web/API/window.onscroll

демо-ссылка

http://jsfiddle.net/MA4dC/

JerryHuang.me 09 янв. 2014, в 21:04

Ещё вопросы

Вы пытались разорвать плагин jquery, на который вы смотрели? Я работал над старым проектом, который не мог использовать jquery, поэтому я просто выпотрошил все jquery и сделал его чистым js.

Cilan · Accepted Answer · 2014-01-09T20-38-00.000Z

Установите CSS, когда pageOffset - это определенная точка (в событии window.onscroll):

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }
};

что-то более полное:

window.onscroll = function()
{
    if(pageOffset >= 1000)
    {
        document.getElementById('backToTopID').style.visibility="visible"
    }else
    {
        document.getElementById('backToTop').style.visibility="hidden";
    }
};

DEMO

Спасибо!! это отлично работало, добавив отсутствующее: var pageOffset = document.documentElement.scrollTop || document.body.scrollTop;