CSS sticky implementation back to top

You can often see such a "back to top" function in some documents or articles. There are two specific interactions

1. Only scroll a certain distance will appear, return to the top to hide again
2. Click to return to the top

For example, LuLu UI

It’s clicking and scrolling again. It seems that JavaScript must be used, but it doesn’t have to be. After some consideration, I can achieve such an interactive effect with just a little CSS. Let’s take a look.

One, sticky scrolling

Here we need a little bit. For example, here does it appear after scrolling to a certain distance, is it a bit similar to the concept of CSS sticky It's just that the general function of sticky is to scroll to a certain distance and then fix it to a certain position. mdn explains as follows

The element is positioned according to the normal document flow, and then relative to its nearest scrolling ancestor (nearest scrolling ancestor) and containing block (nearest block-level ancestor), including table-related elements, based on top , right The values of bottom , and left The offset value does not affect the position of any other elements.

Although there is a way out of the interaction with what we need, it can still be combined through certain "skills", and first simply implement the layout

<a class="back"></a>
<article>
...很多内容
</article>

Note here that you need to put .back in front, otherwise sticky positioning cannot be triggered, and then add sticky positioning .back

.back{
  position: sticky;
  display: block;
  top: 0;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
}

Since top here is 0, the back button is pasted at the top during the scrolling process, as follows

At this time, what top to a negative value?

.back{
  /**/
  position: sticky;
  top: -30px;
}

As you can see, the button will be -30px , as follows

Next, we .back down by the entire screen distance, which is 100vh

.back{
  /**/
  position: sticky;
  top: -30px;
  transform: translateY(100vh);
}

In this way, the effect is very close to what we need, but only a part of it appears in the end, as follows

The principle is as follows

Finally, set the top to be smaller until .back can appear completely, for example, set -60px

.back{
  /**/
  position: sticky;
  top: -60px;
  transform: translateY(100vh);
}

This is basically done, but there are still some problems, then look down

2. Processing in the lower right corner

The above implementation actually has two layout issues that need to be optimized:

1. The button itself occupies a certain amount of space
2. The button is generally located in the lower right corner

Generally, in order to make an element not occupy space, the method that may be thought of is to set absolute positioning. However, because position: sticky set here, absolute positioning cannot be set anymore. In addition, we can also use floating float , which can easily solve the above two layout problems

.back{
  /***/
  float: right
}

There are two benefits of setting right floating, one is to break away from the document flow without affecting the height, and the other is to achieve the right-to-right effect. The actual effect is as follows

In fact, there is still a small problem here. When there is more text on the head, you can clearly see the right surround effect, as follows

How to deal with it? Very simple, just add a negative margin .

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
}

But there is a new problem, the button underneath is leaking out again

Since top has been sticky occupied, now change the position of the button can only rely on transform , and where you can use calc be calculated, while top also a corresponding reduction in their height

.back{
  /***/
  float: right；
  margin-top:-50px;/*自身高度*/
  top: -110px; /*60 + 50*/
  transform: translateY(calc(100vh + 50px));
}

Perfect!

Three, back to the top

It is easier to return to the top. Generally, href='#' . Of course, for smooth scrolling, you can add scroll-behavior: smooth

html, body { 
  scroll-behavior:smooth; 
}

The actual effect is as follows

Finally, attach the complete code, very few

html,body{
  scroll-behavior: smooth;
}
.back{
  position: sticky;
  float: right;
  top: -110px;
  margin-top: -50px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
  background-size: 50%;
  width: 50px;
  height: 50px;
  transform: translateY(calc(100vh + 50px));
}

HTML only needs to add a tag at the beginning

<body>
  <a class="back" href="#"></a><!--添加再这里就行了-->
  <article>
  ...很多内容
  </article>
</body>

The online code can be accessed back-top (codepen.io)

Four, summary and explanation

The above uses CSS sticky to realize a small interaction that automatically displays the return button. The amount of code itself is not complicated. In fact, it is a little imagination. Associating more similar effects, trying more, may bring different solutions. The following summarizes the main points of implementation:

1. CSS sticky can achieve sticky scrolling effect, you can set a negative value
2. transformY(100vh) can be offset by 1 screen height without affecting the position
3. Floating can be separated from the document flow without affecting the height
4. Negative margin can offset the floating surround effect
5. scroll-behavior: smooth can achieve smooth scrolling
6. Compatibility depends on sticky, not compatible with IE

It's a relatively practical small function. Although JS can also be implemented, why bother JS if it can be implemented with CSS? Compared with JS, CSS is simple and convenient to use, and there is no need to consider loading issues, and almost zero cost. Finally, if you think it’s pretty good, if it’s helpful to you, please like, bookmark, and forward ❤❤❤