I have implemented a css only back to top button, but on shorter pages it shows when it is not needed.

.top {
  position: sticky;
  bottom: 9px;
  padding: 9px;
  place-self: end;
  margin-top: 109vh;

  font-weight:700;
  border-radius: 9px;
  color: var(--a1);
  background: var(--c2);
}
.top:hover {
  color: var(--c2);
  background: var(--a1);
  text-decoration: none;
}

You can see it in the bottom left corner here: https://abridge.netlify.app/overview-abridge/ (don't need to see it when the page is this short)

It works fine so long as its a longer page: https://abridge.netlify.app/overview-code-blocks/

I have thought of artificially increasing the size of short pages, but that just seems kinda hacky, also I know I can easily resolve this with javascript, but I am trying to find a solution that does not rely on javascript. I tried playing around with media queries but could not find any that actually query how much content is in a viewport.

If you are familiar with zola, the repo is here: https://github.com/Jieiku/abridge

If you have zola installed you can clone the repository and run zola serve from the directory, to test changes locally.

Here is the file with the back to top: https://github.com/Jieiku/abridge/blob/master/sass/include/_top.scss

EDIT: for the moment I have discovered a creative way of resolving this, because its a SSG and zola has readtime value I did this:

{%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<a href="#" >&cuwed;</a>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

The only thing to resolve now is to somehow get it over on the right side of the page instead of the left side.

CodePudding user response：

I think the cleanest solution would be to utilize @media screen and (max-height: 110vh) Here is my suggestion, Please Ignore the comments:

@media screen and (max-height: 110vh){
    .top{
        display:none;
    }
}

The idea here is that if the page's viewport is currently within that max-height of 110vh then we want to set .top to no longer display on the page. Please let me know if this helped.

CodePudding user response：

This is the solution I used:

.topout {
  display: flex;
  position: sticky;
  bottom: 1px;
  padding: 20px;
  place-self: end;
  margin-top: 109vh;
  pointer-events: none;
}
.topin {
  margin-left: auto;
  pointer-events: all;
}
.top {
  padding: 9px;
  font-weight:700;
  border-radius: 9px;
  color: var(--a1);
  background: var(--c2);
}
.top:hover {
  color: var(--c2);
  background: var(--a1);
  text-decoration: none;
}

Then in Zola Template page:

{%- block gotop %}

{%- if page.reading_time %}
{%- if page.reading_time > 1 %}
<div >
<div> </div><div ><a href="#" >&cuwed;</a></div>
</div>
{%- endif %}
{%- endif %}

{%- endblock gotop %}

You can see it here: https://abridge.netlify.app/overview-code-blocks/

Unfortunately the page scrolls a whole page past the footer, assuming because of the margin-top... not sure there is anything I can do about this.