What methods can be used to identify the presence of a scrollbar in an

Currently, I am facing an issue with my SAPUI5 app. In the app, I have a table that extends beyond the screen. To allow users to navigate back to the top of the table, I have added a button. However, I only want this button to be displayed when the table goes off the screen. Unfortunately, the button is always visible, even when it's not needed. Despite searching for solutions, I haven't found one that works.

In my XML view, I have defined the button as follows:

<html: a id="toTop" href ="#_xmlview0--top">
      <Button id="backToTopBtn" text = "back"/&>
</html:a>

Additionally, at the top of my view, I have defined:

<html:div id = top"></html:div>

I have tried using various jQuery solutions, but none have been successful. One approach I attempted was:

if($('body').height()>$(window).height()){
     //go back to top here
  }

However, upon inspecting the values, I noticed that both the body height and window height are the same. Any suggestions on how to tackle this problem?

javascriptscrollbarsapui5

Answer №1

If you want to make sure your button is not always visible, you can hide it using either styles or javascript. Assuming you opt for display: none, you can then show the button when the user scrolls past a certain point.

You can use element.scrollTop and element.scrollLeft to determine the offset of an element.

To display something only after scrolling a specific amount in the body, you can implement the following:

var page = document.body;
var button = document.getElementById('backToTopBtn');

function showScrollTopButton() {
    if (page.scrollTop > xyz) {
        button.style.display = 'block';
    } else {
        button.style.display = 'none';
    }
    
    return;
}

window.addEventListener('scroll', showScrollTopButton);

In this code snippet, replace xyz with the numerical value at which you want the button to appear and disappear.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing dispatch sequentially within ngrx StateManagement

I have been working on a project that utilizes ngrx for state management. Although I am still fairly new to ngrx, I understand the basics such as using this.store.select to subscribe to any state changes. However, I have a question regarding the following ...

javascriptangularngrxangular9

During the Jasmine test, an error was encountered when trying to call a factory function that includes both a local and another function. The error message displayed

I have a factory with two functions and two local methods. I have written a Jasmine test case in which I expect the local method updateDetails and the factory function SavePref.savePref to be called when SavePref.saveDetails(values, prop); is invoked, as s ...

javascriptangularjsjunitjasmine

Arranging Text and Images in HTML/CSS to Ensure Optimal Placement When the Window Size Changes

Hello fellow coders! I've recently started diving into the world of website development and I have a query regarding positioning elements and handling window resizing. Can anyone help me out? I'm trying to center an image, a message, and a passw ...

javascripthtmlcss

Using Jquery to loop through various select options within a designated container div

I am seeking a way to loop through multiple select options within a specific div using the jQuery each function. If any field is left empty during this iteration, I would like the loop to break and set the reqCourseFlag variable to 0. The current implement ...

javascriptjqueryhtmlloops

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

The Jquery css on my website is not functioning properly

After creating a website feature where clicking on a specific div triggers an onclick event processing a chat_generate function, I encountered some issues. This funciton should insert HTML for the chat into a designated .open_div based on the id generated ...

javascriptphpjqueryhtmlcss

Steps for creating a Foundation 6 accordion

Can anyone assist me in creating a Foundation 6 accordion? I tried to follow the code from the documentation, but it's quite confusing. I seem to be missing something and can't figure out what. Here is the HTML code from the docs: <ul class= ...

javascriptjqueryzurb-foundationaccordion

Can you explain the distinctions between Vue JS and React JS?

As I delve into learning Vue Js and React Js, my search for a detailed comparison between the two on Google left me unsatisfied. I came across resources answering the singular questions "What is Vue js?" and "What is React Js," but none that directly comp ...

javascriptreactjsvue.js

Tips for aligning a dropdown button with the other elements in your navbar

I followed the code outline from a tutorial on We3schools, but I'm having an issue with the button not aligning correctly with the navbar. https://i.sstatic.net/fSRIT.png I attempted to adjust the code for proper alignment before publishing, but was ...

javascripthtmlcssnavbar

What is the best way to achieve line breaks in text that auto-wraps in JavaScript/PHP?

My resizable div contains text/sentences. As I adjust the size of the div, the text wraps itself to perfectly fit within the available space in the container div. Now, I am faced with the task of converting this dynamic text into an image using php and th ...

javascriptphpjqueryhtmlcss

Using data across multiple instances in node.js EJS partials

I need some advice regarding my nodejs project. I have created a sidebar partial that requires user data to be displayed on it. This sidebar is utilized across multiple pages in the project. However, currently, I have to include the user data in every func ...

javascriptnode.jsexpressejs

Switching the mouse cursor when the mousedown event occurs

I'm trying to implement a feature where holding down the mouse will change the cursor to an image, and when releasing the mouse it should revert back to its default. However, the code I have isn't working properly - you have to right click then l ...

javascriptjquerymouseevent

Reducing size and Assembling JavaScript and CSS

I find myself in a bit of a dilemma when it comes to using just one JS file and one CSS file for a website. Let me elaborate: As someone who mainly works with CMS platforms like Joomla, I often run into issues during page speed tests where experts recomme ...

javascripthtmlcssconcatenationpagespeed

Synchronize Protractor with an Angular application embedded within an iframe on a non-Angular web platform

I'm having trouble accessing elements using methods like by.binding(). The project structure looks like this: There is a non-angular website | --> Inside an iframe | --> There is an angular app Here's a part of the code I'm ...

javascriptangularjsprotractor

Discovering a specific element using jQuery

I am trying to work with a div structure like this: <div class="country"> <div class="cty_popover"> <p>TITLE</p> <ul> <li>NAME 1</li> <li>NAME 2</li> ...

javascriptjqueryfind

What is the best way to eliminate an Injected Script from my system?

I have added a script to my GWT Application using ScriptInjector ScriptInjector.fromUrl("js/jquery-1.7.2.min.js").setWindow(ScriptInjector.TOP_WINDOW).setCallback(new Callback<Void, Exception>() { @Override public ...

javascriptgwt

Tips for organizing a multi-dimensional array based on various column indexes

I am looking to organize a multidimensional array by multiple column index. Take, for instance, the test data provided below: var source = [ ["Jack","A","B1", 4], ["AVicky","M", "B2", 2], [ ...

javascriptarraystypescript

Having trouble with JQuery toggle()? Need some assistance with fixing it?

My attempts to utilize JQuery toggle functionality have been unsuccessful. The sliding up and down animation is not smooth and instead happens very quickly. I aim to achieve a sliding effect in my code similar to this example (Please refer to Website Des ...

javascriptjqueryajax

In the event that the get request fails, go ahead and clear the

Currently facing an issue and seeking a solution: I have a game running that retrieves the state of the game periodically. However, if a user logs out, the game ends but continues to send put requests at the set interval. I am exploring options like setti ...

javascriptreactjsresthttpput

Struggling to design a button that can delete tasks from the list, but encountering issues with the filter function

Although I am able to push values, I seem to be struggling with the filtering process. Can anyone provide guidance on whether I am using the filter method incorrectly or if there is another issue at play? import { useState } from 'react'; const ...

javascriptreactjs