Back to top button with CSS only. Mild scrolling with only CSS possible?

Question

Back to top button with CSS only. Mild scrolling with only CSS possible?

Navigation

#1 by (7 votes)

4

I know that here on the site there are a lot of Soft Scroll and Button issues for "back to top" ( back to top ), but they all involve JavaScript or jQuery, but this não is my goal.

I would like to make or know if it is now possible to make a smooth scroll with CSS only. method on a button of type Voltar para o Topo ?

Just the button that sends me back to the top I got, now I'd like to put a smooth page scrolling behavior back to the top.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
section {
    height: 300vh;
    background-image: linear-gradient(red, blue);
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #000;
    text-decoration: none;
}
.btn::after {
    content: "↑";
    font-size: 32px;
    font-weight: bold;
    color: aliceblue;
    transition: margin-top 250ms;
}
.btn:hover::after {
    margin-top:-8px;
}

<section></section>
<a href="#" class="btn"></a>

html5 css css3 ux ui

asked by anonymous 29.10.2018 / 13:19

1 answer

How to put two backgrounds on the same page? Is it possible to de-structure an array in PHP equal to or similar to the list in Python?

score 7 · Accepted Answer

Yes, just meteres, scroll-behavior: smooth; in html. link

If you do not want to put all scrolls on the page you can create a new class of css and put scroll-behavior: smooth; there and then assign this class to those you want.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}
section {
    height: 300vh;
    background-image: linear-gradient(red, blue);
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 50px;
    height: 50px;
    background-color: #000;
    text-decoration: none;
}
.btn::after {
    content: "↑";
    font-size: 32px;
    font-weight: bold;
    color: aliceblue;
    transition: margin-top 250ms;
}
.btn:hover::after {
    margin-top:-8px;
}

<section></section>
<a href="#" class="btn"></a>

It's worth noting that this method is not yet supported in most browsers, only newer versions of modern browsers are supporting, as seen on Can I Use .