Ways to eliminate the white overlay that occurs on the page after clicking the scroll top button

Hi there! I've been busy with updating my site at , and noticed a small glitch. Every time I hit the Back to Top button at the bottom of the page, the screen goes white. Any ideas on how to fix this issue? Thanks in advance!

Answer №1

After reviewing the pagetop__link class, I noticed that in the "" file, where you have defined that class in the stylesheet, there is a selector that looks like this:

.pagetop__link:active::before {
   background:rgba(255,255,255,0.9);
   z-index:9999;
}

To fix the issue, simply remove the line

background:rgba(255,255,255,0.9);
.

Answer №2

To fix the issue, delete the line .pagetop__link::before {position: fixed}

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

Tips for effectively grouping a JavaScript object array with the help of Lodash

I have an array of objects in JavaScript that looks like this: [{ day : "August 30th", id: 1, message : "lorem ipsum1" },{ day : "August 30th", id: 2, message : "lorem ipsum2" },{ day : "August 31th", id: 3, message : " ...

Implement the addition of a class upon hovering using AngularJS

My goal is to include a new class when hovering over the li element using Angular in the code snippet below. <li ng-mouseenter="cola-selected=true" class="pull-left" ng-class="{'selected' : cola-selected}"> <a href="interna.html"> ...

Generating elevation graph from a kml file with the combination of php and javascript

Currently, I am exploring the Google Elevation Service with the goal of creating an elevation profile similar to the one showcased in this example: Below is the JavaScript code snippet used: var elevator; var map; var chart; var infowindow = new google.m ...

One creative method for iterating through an array of objects and making modifications

Is there a more efficient way to achieve the same outcome? Brief Description: routes = [ { name: 'vehicle', activated: true}, { name: 'userassignment', activated: true}, { name: 'relations', activated: true}, { name: &apos ...

Attempting to eliminate the parent container of a slide generated by the Slick Slider Plugin

I have developed a filter mechanism that hides specific classes within a slick slider based on the data-tag associated with the objects and the value of checkboxes. However, when these classes are hidden, they still occupy space because I should be hiding ...

Generating a personalized array by matching an array with an object using JavaScript / Node.js

let obj ={ 97:{ data:"OS", location:"system", access:"globally", parameters:"aed31" }, 490:{ data:"Ae-ds", location:"rootpath", access:"admin rights", parameters:"4fsje" }, 278:{ data:"config", location:"system", ...

Unable to transfer HTML code into the TinyMCE editor

I've successfully stored raw HTML content in my database, and now I want to display it in my TinyMCE editor for users to easily edit and submit. Below is the form: <textarea id="postfullOnEditPop" type="text" class="validate" placeholder="Enter f ...

Discover the method of obtaining the post id within an Ajax callback in the Wordpress

Currently, I am using the Add to cart Ajax callback, but I am facing difficulty in retrieving the post Id from it. MY OBJECTIVE: My intention is to apply the add_filter only on a specific page. Here is the PHP code in functions.php file: add_filter( &apos ...

What is the best way to retrieve information from a JavaScript file?

Learning.vue <template> <div> <button @click="test()">test</button> </div> </template> <script> import records from './records.js' export default { data () { return { ...

Obtain the state name after selecting it from the drop-down menu and clicking the submit button (part 3)

Read more about passing city names from PHP to JS in the second part of this discussion on Stack Overflow. This is the JSON data for states ($stateJsonObject): Array ( [0] => stdClass Object ( [stateId] => s1 [stateName] => Kuala Lumpur) ...

I'm having trouble with my useState in React/NEXTjs because it's not adding onto the result of a socket.io event from the server, it's simply

Frameworks used: Next.js, Socket.io, React I am currently working on a straightforward messaging application. The main concept involves emitting a message typed by a user, sending that message to the server, and then broadcasting it back to all clients th ...

What is the best way to achieve a perfect rounded div using Bootstrap 4?

While browsing through the Bootstrap documentation and searching on stackoverflow, I came across a solution to create circular images using border-radius set at 50%. However, when I tried implementing it with my slightly oversized image, it ended up lookin ...

When implementing getStaticProps and getStaticPaths in a dynamic route, a 404 error page is displayed

As someone new to Next.js, I decided to delve into creating a basic news website where I could access articles through this specific route: /[category]/[article] The directory structure of pages is organized as follows: _pages __[category] ____index.jsx ...

What is the method for aligning inline-block text to the right after a line break?

I am currently encountering a challenge in developing a directory tree using <ul> element, particularly when the text of an item exceeds the width of the container. As I am utilizing the antd React library for this project, my options are somewhat l ...

Managing special characters in PHP: Understanding charsets

While working on my website using HTML and PHP, I am having an issue with special characters (Å, Á ...) appearing as on the screen when using the post function. Strangely enough, all other HTML content displays correctly. Any suggestions for a solution ...

Beginning the default execution right away

Currently employing jQuery. This is my code snippet: $("#input").keypress(function(event) { getConversion(); }); Is there a way to ensure that the key pressed is first added to #input before triggering the getConversion() function? ...

The JSON file containing API data is stored within the _next folder, making it easily accessible to anyone without the need for security measures or a login in the Next

When accessing the protected user Listing page, we utilize SSR to call the api and retrieve all user records which are then rendered. However, if one were to check the Network tab in Chrome or Firefox, a JSON file containing all user data is generated and ...

Is there a way to customize my visual studio code to automatically insert an indented space between curly brackets in CSS when I press enter?

Whenever I try to open curly brackets in CSS and press enter, it simply moves to the next line without adding an indentation as shown below: body { } Despite going through the settings and experimenting with different options, I haven't been able to ...

Axios fails to capture and transmit data to the client's end

I created a backend using Express to retrieve Instagram feed images and then send their URLs to my front end, which is built with ReactJs. When I fetch the image URLs with instagram-node and send them to the front end, everything functions as expected. How ...

What is the best way to determine if this statement is redundant or not?

I am attempting to generate a file with PHP that includes a substantial amount of HTML content and MySQL queries. The issue arises on line 3, indicated by the downward-facing arrow. The primary error identified is an excess of single inverted commas causi ...