I have the Back to Top plugin enabled for my devsite on 4.7.  The up symbol appears on both the desktop and the mobile display.  It is such a convenience to move up quickly.  I find when I look at the Invision Community site on my mobile, specifically Matt's reply to Invision Community 5: Editor Permissions and Custom Embeds, that I had to flick and flick and flick to reach the top of the site and refer to another notification.  

My suggestion: implement a return to top or back to top as a default feature for the platform, especially since 'plugins' are going away for v5. 

Is this Android shaming? Just for the record, not everyone at Invision Community has an Apple phone.  🤫 I know of at least one staff member who has an Android phone.

 

 I know of at least one staff member who has an Android phone.

Name and shame them! They must be outted! 😆

Yeah, it's super easy in Invision Community 5. Barely an inconvenience.

The javascript I paste in is this:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
      let newLi = document.createElement("li");
      let newLink = document.createElement("a");
      newLink.href = "#";
      newLink.innerText = "Back to Top";
      newLink.setAttribute( 'style', 'padding: .8em');

      let newIcon = document.createElement("i");
      newIcon.classList.add("fa", "fa-arrow-up");

      newLink.prepend(newIcon);

      newLink.addEventListener("click", function (event) {
          event.preventDefault();
          window.scrollTo({ top: 0, behavior: "smooth" });
      });

      newLi.appendChild(newLink);

      let ul = document.querySelector('nav.ipsBreadcrumb--bottom a[data-action="defaultStream"]').closest("ul");
      if (ul) {
          ul.appendChild(newLi);
      }
  });
</script>

 

Yeah, it's super easy in Invision Community 5. Barely an inconvenience.

In your video (about 10s) we can see that back to top text was already added, how did you do that?

 

Can you provide the same for "Mark all content as read"?

Thank you.

Same steps as above, the JS is:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
      let newLi = document.createElement("li");
      let newLink = document.createElement("a");
      newLink.href = ipsSettings.baseURL + 'markallread/?csrfKey=' + ipsSettings.csrfKey;
      newLink.innerText = "Mark Site Read";
      newLink.setAttribute( 'style', 'padding: .8em');

      let newIcon = document.createElement("i");
      newIcon.classList.add("fa", "fa-solid", "fa-eye");

      newLink.prepend(newIcon);
      newLi.appendChild(newLink);

      let ul = document.querySelector('nav.ipsBreadcrumb--bottom a[data-action="defaultStream"]').closest("ul");
      if (ul) {
          ul.appendChild(newLi);
      }
  });
</script>

 

In your video (about 10s) we can see that back to top text was already added, how did you do that?

I did it first without recording, then removed it but didn't refresh the page before recording, that's all.

 

 

In your video (about 10s) we can see that back to top text was already added, how did you do that?

I did it first without recording, then removed it but didn't refresh the page before recording, that's all.

Aha, I needed to refresh the page in order to see it 🤫

Fantastic Matt 👍

 

Yeah, it's super easy in Invision Community 5. Barely an inconvenience.

The javascript I paste in is this:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
      let newLi = document.createElement("li");
      let newLink = document.createElement("a");
      newLink.href = "#";
      newLink.innerText = "Back to Top";
      newLink.setAttribute( 'style', 'padding: .8em');

      let newIcon = document.createElement("i");
      newIcon.classList.add("fa", "fa-arrow-up");

      newLink.prepend(newIcon);

      newLink.addEventListener("click", function (event) {
          event.preventDefault();
          window.scrollTo({ top: 0, behavior: "smooth" });
      });

      newLi.appendChild(newLink);

      let ul = document.querySelector('nav.ipsBreadcrumb--bottom a[data-action="defaultStream"]').closest("ul");
      if (ul) {
          ul.appendChild(newLi);
      }
  });
</script>

 

Same steps as above, the JS is:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
      let newLi = document.createElement("li");
      let newLink = document.createElement("a");
      newLink.href = ipsSettings.baseURL + 'markallread/?csrfKey=' + ipsSettings.csrfKey;
      newLink.innerText = "Mark Site Read";
      newLink.setAttribute( 'style', 'padding: .8em');

      let newIcon = document.createElement("i");
      newIcon.classList.add("fa", "fa-solid", "fa-eye");

      newLink.prepend(newIcon);
      newLi.appendChild(newLink);

      let ul = document.querySelector('nav.ipsBreadcrumb--bottom a[data-action="defaultStream"]').closest("ul");
      if (ul) {
          ul.appendChild(newLi);
      }
  });
</script>

I did it first without recording, then removed it but didn't refresh the page before recording, that's all.

@Matt This then leaves a small blank area where the Text Block is, within the footer. Any way to make that go away?