What is the best way to make a CSS change triggered by a onScroll() event stay in place permanently?

I need a div element to be displayed as a "scroll back to top" button on my webpage when the user has scrolled past a certain point. To achieve this, I am using the JavaScript code provided below:

$(document).ready(function() {
   $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 1500) {
            $('#backtotop').css({'display':'block'});
        } else {
            $('#backtotop').css({'display':'none'});
        }
    });
 });

The script works well, except for the fact that the div only appears while actively scrolling. The CSS style for #backtotop is set to "display:none" in the stylesheet. If I change it to "display:block", then the issue becomes that the div is always visible and fades out when scrolling above the 1500 value, only to reappear when scrolling stops.

In essence, I want the div to appear when reaching a scroll point, as it currently does, but I also want it to remain visible even when scrolling stops, which is not happening at the moment.

jquerycsseventsonscroll

Answer №1

Do you need something similar to this? EXAMPLE http://jsfiddle.net/yeyene/6gAHT/2/

Are you looking to display a To Top button after scrolling past a certain point, which when clicked, will smoothly scroll back to the top and hide again?

$(document).ready(function(){
    $(window).scroll(function() {
       var scrollVal = $(this).scrollTop();
        if ( scrollVal > 500) {
            $('#backtotop').show();
        } else {
            $('#backtotop').hide();
        }
    });
    $('#backtotop').on('click', function(){
        $('html, body').animate({ scrollTop: 0 }, 'slow');
    });
});

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

Retrieving specific nodes from a JSON file and storing them in an array using jQuery

Hey there, I have a question that may seem basic to some. I'm not very familiar with JSON and haven't had much experience working with it. Previously, I had my document set up using XML, but now I'm having trouble parsing JSON correctly. Le ...

jqueryxmlajaxjsonappend

Enhancing a Form Submission with Ajax

Working on a complicated form generated with Symfony2 and rendered using Twig and JQuery. This form is utilized to make modifications to e-commerce orders, therefore there's no clear submission process. How do I effectively sync the old form with the ...

jqueryajaxformssymfony

Issues with jQuery horizontal sliding gallery functionality

My attempt at creating a jQuery sliding video gallery is not working as I hoped. Instead of scrolling through the images when clicking arrow buttons, the entire div moves left or right depending on the direction. HTML: <div id="videocontainer"> & ...

jqueryhtmlcss

Adjust the dimensions of the dropdown menus

I've set up 2 dropdown menus, but I'm having trouble adjusting their size. I need them to fill the screen width. Here's my code: <select id="repeatSelect" ng-model="selectedArea"> <option ng-repeat="(key,prop) in result" value=" ...

htmlcssangularjsdropdown

Is separating Jssor Slider CSS effective?

Having a bit of trouble with the Jssor slider here. I'm trying to separate the slider styles into an external CSS document and running into issues. For instance: <div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 11 ...

jquerycssjssor

Maintaining Portrait Lock for Viewport in HTML5/CSS3: A Guide

Can the orientation of a mobile device's view port be locked to portrait mode? I tried searching for a solution on Google, but was unable to find clear instructions on how to achieve this. ...

htmlcssmobileviewportportrait

Place the dataLabel above a specified column in Highcharts

My bar chart has a stacked design, with an invisible bar added to the height of the tallest bar to ensure clickability even for small values. Without this invisible stack, columns with a value of 1 would be difficult to click on. One issue I am facing is ...

jqueryhighcharts

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Creating a PHP script to generate JSON data for fullcalendar integration

I need assistance with creating a PHP script to display the JSON string below: { id:1, start:"10:00", end:"12:00", dow:[1,4], ranges[{start:"2015/03/01", end:"2015/04/01"}] } I am specifically looking for guidance on how to extract and display the &apo ...

phpjqueryjsonparsingfullcalendar

Can you identify the missing piece in my design?

#container { width: 250px; margin: 0 auto; } .group { border: 1px solid grey; margin-bottom: 20px; } .group p { text-align: center; font-family: Helvetica sans-serif; font-size: 25px; color: #2e3d49; } .group img{ wid ...

htmlcssimage

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

I have a row of 4 div elements aligned horizontally from left to right. Each div takes up 25% of the screen width. I am looking for a solution to make them wrap when the user resizes the screen instead of overlapping each other. .MenuSett { margin-to ...

htmlcss

Locate the <li> element within the list that was clicked on by the user using JQuery UI Selectable

I am trying to retrieve the <li> element that the user has clicked on in a jQueryUI selectable. The goal is to determine whether the clicked element is already selected or not and then take action based on that. The following code is what I have so f ...

jqueryselectable

Interact with database using Ajax and Codeigniter (utilizing Bootstrap modal)

My goal is to create an advanced search feature with an interactive button that opens input fields and dropdown menus. To populate these dropdown menus with data from the database without overloading the page, I plan to use AJAX when the user triggers the ...

phpjqueryajaxtwitter-bootstrapcodeigniter

Achieve a new line break when the user hits the "Enter" key using HTML and JavaScript

I'm in the process of developing a Chrome Extension that allows users to create a to-do list. My goal is to enable users to submit their task by pressing the "Enter" key, which should move the task to the next line after submission. I am currently fac ...

javascripthtmlcssgoogle-chrome-extension

Creating a custom dropdown behavior using Angular

I have a unique interface requirement where users must be able to click on an element to view its options, which are displayed as checkbox inputs. Essentially, I need a custom 'select' element that allows for multiple checkbox selections. ...

jqueryhtmlcssangularjs

Ways to adjust flex division to occupy the entire height of its container

https://i.sstatic.net/4YInI.png https://i.sstatic.net/hu8mG.png https://i.sstatic.net/Q51ha.png I am looking to activate an onClick event on the body where discussions and icons are located. While triggering onClick on the body itself poses no issue, I a ...

htmlcssbootstrap-4onclickbootstrap-5

Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...

htmlcssflexbox

Avoid allowing users to accidentally double click on JavaScript buttons

I am working with two buttons in a Javascript carousel and need to prevent users from double-clicking on the buttons. Below is the code I am using: var onRightArrow = function(e) { if (unitCtr<=unitTotal) { unitCtr++; TweenLite.to(p ...

javascriptcsshtmlcarousel

li experiencing a background width problem due to extended text

Check out this code snippet with a problem In the image below, you can see that the background of the li element with more text is larger compared to the others. It's important to note that the <ul> is scrollable. I've experimented with va ...

javascriptjqueryhtmlcss

Steps for activating or deactivating the book in/book out button in an ajax table

Hello, I am currently learning about AJAX and could use some assistance. Can someone help me figure out how to enable or disable the "Book In" or "Book Out" buttons in an AJAX table based on the result of the "book in" or "book out" field? Here is my inde ...

phpjqueryajax