Как запустить только функцию, которая генерирует кнопку «вверх» в зависимости от размера экрана? - PullRequest
Новая
       6

Как запустить только функцию, которая генерирует кнопку «вверх» в зависимости от размера экрана?

0 голосов
/ 31 декабря 2018

У меня есть кнопка back-to-top, которая появляется, когда пользователи прокручивают страницу вниз, но мне бы хотелось, чтобы эта кнопка появлялась только в зависимости от размера экрана.

Как кто-то новичок в javascript, я не могу понять, как добавить это, кроме того, что я предполагаю, что это должно быть частью аргумента "if".

HTML: 

<button onclick="topFunction()" id="button-top" title="Go to top">Top</button>

Код CSS: 

        #button-top {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none; 
    outline: none;
    background-color: #d46900;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-radius: 10px;
    font-size: 1.5em;
}

#button-top:hover {
    color: #1c1c1c;
    background-color: #ccc;
}

Код JS: 

/* BACK TO TOP BUTTON*/
// When the user scrolls down 20px from the top of the document, show the button window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("button-top").style.display = "block";
    } else {
        document.getElementById("button-top").style.display = "none";
    }
}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {
    document.body.scrollTop = 0; // For Safari
    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Ответы [ 2 ]

0 голосов
/ 31 декабря 2018

Не уверен, что ты хочешь.Если вы хотите, чтобы кнопка на верхней кнопке появлялась на большом экране, например на рабочем столе, и исчезала на меньшем экране, например на планшете или мобильном устройстве, вы можете сделать что-то вроде этого: 

@media only screen and (max-width: 768px) {
    #button-top {
        display: none;
    }
}

, но если вы хотите, чтобы кнопка на верхней кнопкепоявляются после прокрутки и исчезают после прокрутки вверх, вы можете сделать что-то вроде этого:

css: 

#button-top.show {
    visibility: visible;
}

js: 

$(document).on("scroll", function () {
    if ($(window).scrollTop() > 100) {
        $("#button-top").addClass("show");
    } else {
        $("#button-top").removeClass("show");
    }
});
0 голосов
/ 31 декабря 2018

Вы должны использовать медиа-запросы, чтобы показать или скрыть кнопку в зависимости от размера экрана: 

/* Hide the button if the width is less than 500px */
@media (max-width: 500px) {
  #button-top {
    display: none;
  }
}
<button type="button" id="button-top">Back to top</button>

Вы можете запустить фрагмент выше и изменить размер браузера, когда ширина станет меньше 500px, кнопка исчезнет.

...