php Question posted in
Official manual can be found here.

Php – Display "back to top" button only if there is enough text in the text DIV

My website uses PHP and CSS. I am looking for a solution to display a back to top button, but only if the content DIV has enough text so the user needs to scroll down, then click the button to back up.

Is this possible without javascript?

I can place such a button, click it to go to the top of the content DIV, but if there is not enough text to fill the entire content DIV for high resolutions (higher than 1920×1080), the button looks silly as it has no use and there is not enough text to fill the content DIV.

I can manually hide the button with the display: hidden; line, but setting the class of the button to one of three states (normal vs. hide for higher resolutions vs. hide for much higher resolutions) is tedious.

In short, how can I set something up like "If length of text/size of text > height of content div, then display back to top button"?

Playing around with DIVs and CSS

Tags:

2

Answers


  1. 0

    While it’s challenging to achieve this without using JavaScript for dynamic calculations based on the content size and scroll position, you can still make it more flexible using pure CSS for a responsive design. One approach is to use media queries combined with the :empty and :before pseudo-elements to conditionally display the "back to top" button. However, this solution assumes that your content is within a specific container.

    Login or Signup to reply.
  2. 0

    Please check my code how I implement this on my website

    const rootElement = document.documentElement;
const upToTopBtn = document.getElementById("up-to-top");

function scrollToTop() {
  rootElement.scrollTo({
    top: 0,
    behavior: "smooth",
  });
}

function showBtn() {
  if (document.body.scrollTop > 100 || rootElement.scrollTop > 100) {
    upToTopBtn.classList.add("active");
  } else {
    upToTopBtn.classList.remove("active");
  }
}

document.addEventListener("scroll", showBtn);
upToTopBtn.addEventListener("click", scrollToTop);
    $lightBlue-900-dark: #003c6c;
$lightBlue-900: #01579b;
$lightBlue-700: #0091ea;
$dark-blue: #111c31;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
}
body {
  background-color: #111c31;
  color: #fdfdfd;
  height: 3000px;
  background-image: linear-gradient(135deg, $dark-blue, $lightBlue-700);
  font-family: arial;
}
h1,
h2 {
  text-align: center;
  margin: 15px 0;
}
#up-to-top {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  background-color: $lightBlue-900-dark;
  border-radius: 100%;
  position: fixed;
  bottom: 40px;
  right: 25px;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 0 25px rgba(0, 0, 85, 0.5);
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;

  span {
    max-width: 35px;
    transition: 0.3s ease-in-out;

    img {
      object-fit: cover;
      object-position: center;
      max-width: 100%;
    }
  }

  &:hover {
    box-shadow: 0 0 30px rgba(0, 0, 17, 0.8);
    background-color: $lightBlue-900;

    span {
      transform: rotate(-360deg);
    }
  }
}

.active {
  visibility: visible !important;
  opacity: 1 !important;
}
    <h1>Back to top Button</h1>
<h2>Scroll to Down</h2>


<div id="up-to-top">
  <span><img src="https://i.ibb.co/5krn9rB/arrow-up.png" alt="" height="20"></span>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search