Having issues with implementing the "return to top" functionality using Jquery. Require assistance in resolving the problem and refreshing the

I have encountered an issue with my website while trying to add a "back to top" feature. I have spent the entire day trying to fix it, but unfortunately, I haven't been able to find a solution. I am hoping that someone here can lend me a hand.

Problem: When the page is loading, everything functions properly except for the "back to top" button. However, when I refresh the page, the button appears. This is quite irritating because every time I visit the page, I have to refresh it to see the "back to top" feature.

I obtained the "back to top" feature from this source:

Is there a way to prevent this issue?

Edit 1-2: Test page --> --> choose Menu and scroll down. Then refresh the page to see the problem. It appears right after the refresh.

Edit 3: I have followed this tutorial here:

I added a link to the bottom of Menu.php

<a href="#" class="back-to-top">Back to top <img src="back.gif"> </a>"

I added the script and CSS file. That's all I have done.

jqueryhtmlcss

Answer №1

There seems to be an issue with the button as it only appears after the page has fully loaded.

The button functions correctly without requiring the page to be refreshed, just a simple wait for the full page load.

It's worth mentioning that I am using Google Chrome.

If you are using a different browser, such as Torch, it may have trouble rendering the page effectively.

Edit:

Move the following script to the <head> tag just before the </head>:

<script>
jQuery(document).ready(function() {
var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > offset) {
jQuery('.back-to-top').fadeIn(duration);
} else {
jQuery('.back-to-top').fadeOut(duration);
}
});

jQuery('.back-to-top').click(function(event) {
event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration);
return false;
})
});
</script>

Edit 2:

It appears that the main issue lies with certain scripts not loading when the page first loads, causing the button not to display. Move the necessary scripts to the head of the page to ensure they are loaded at the start and not just when accessing a specific section.

Edit 3:

Change the script from <script> to <script> to ensure proper execution.

Let me know if these changes help resolve the issue.

Edit 4:

Consider placing 

<a href="#" class="back-to-top">Back to Top</a>
directly above </body>.

Edit 5:

After further investigation, it was discovered that 

<a href="#" class="back-to-top">Back to Top</a>
was missing from index.php and needed to be added for proper functionality.

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

"Enhance your website with a dual-column layout using jQuery for

Hello, I am currently utilizing a fiddle link to move one div upward and another div downward simultaneously. While the left column is behaving as expected, I would like to achieve the same functionality for the right column as well. The link being used ...

jqueryhtmlcss

CSS: Overlapping two divs with unique classes and varying margins - Unexpected occurrence or intentional design?

One thing I'm curious about: Will the margins of two different divs merge if they have the same value when intersecting? It appears so! Do paddings not merge when two different divs intersect, even if they have the same value? It seems that way! When ...

css

The functionality of display flex is not functioning as expected outside of the CodePen

I attempted to create a responsive two-column layout on Codepen with success. The layout is quite simple, featuring a YouTube video and some text. However, when I tried to transfer this to my website, it failed to work... Here is the code – hoping someo ...

htmlcssflexboxmedia-queries

The jQuery offset() function is not functioning correctly due to an improper value

When specifying like this: <div id="Chart1"/> <div id= "Chart2"/> and attempting to get the offset top value ($("#Chart2").offset().top) of the second div, it does not take into account the previous div element. Sample link: However, if I s ...

jqueryhtml

Using PHP with Slim PHP Framework to dynamically include CSS files in the header of a document

I have developed a sleek application featuring a login form, dashboard, registration page, and account page. Each of these pages has its own unique route. To maintain consistency across all pages, I have included a shared header and footer by inserting < ...

phphtmlcssdynamicslim

Are you prepared for changing DropDowns?

To ensure users make a selection from a specific dropdown menu, I have implemented the following code to trigger an alert if they fail to do so: <script> function checkSelection(){ var sel = document.getElementById(' ...

javascriptjquery

Importing XML data into a JavaScript variable using jQuery without displaying an alert message

Despite previously asking questions about loading XML into a JS variable, I haven't found a satisfactory solution. In my script, I declare a variable before making an ajax request and then assign the result to that variable. However, this only seems t ...

javascriptjqueryxml

Stop images within contenteditable divs from being easily dragged and dropped into unrelated div elements

In order to maintain data integrity, I have implemented a rule where users are allowed to drag images within a specific div. Later on, I need to retrieve the positions of these images within the div. However, it is crucial for my business requirements tha ...

htmlcss

Share an ASP.NET Model in serialized form along with a file containing just one Jquery Ajax call in your ASP.NET MVC project

Currently, I am working on a project to create a movie library application using asp.net. While designing the admin page, I encountered a challenge with adding movies to the database. Specifically, I needed to gather details such as name, actors, and poste ...

c#jqueryasp.netajaxasp.net-mvc

Issue with CSS transition bug in Offcanvas on Android version 4.1.x

I am attempting to develop an offcanvas menu similar to the one featured in the Google Plus app. Currently, my code functions properly on most devices (android/ios) and browsers (ff, chrome, IE8+). The only issue I am encountering is on a Samsung Galaxy ...

htmlcssmenucss-transitions

Adaptive search bar and components housed within a casing

I am struggling to create a responsive box with a search feature for a mobile website. My plan is to incorporate jquery functions into the site, so I need to design an outer container that will house a distinct logo and search bar. However, when I test thi ...

htmlcss

Retrieving information from MySql to display scheduled events on a calendar

Hello, I have integrated Adam Shaw's Full Calendar plugin into my web application. While I am new to using json and understanding its functionality, I am facing difficulty in fetching events from my database and displaying them on the calendar. If any ...

phpjquerymysqlfullcalendar

The functionality of a Cordova application using Framework 7 CSS can vary across different Android devices

A link is shared for reference showcasing how the progress bar appears on Samsung j2 and other Android devices. Here is the link: [https://i.sstatic.net/C9OpS.jpg](https://i.sstatic.net/C9OpS.jpg) On my personal device, the progress bar is displayed at th ...

androidcsscordovahtml-framework-7

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

javascriptjqueryhtmlcssloops

Eliminating the bottom border of all buttons, except for the last three buttons in the list, solely using pure JavaScript, unless alternative methods are available

I have 3 sets of buttons, with each set containing 9 buttons stacked in 3 columns inside an ordered list (ol) within list items (li). I have removed the bottom border of the buttons to avoid double borders since they are stacked on top of each other withou ...

javascripthtmlcss

Tabulator - Enhancing Filter Results Using a Second Tabulator

I've implemented a Tabulator that displays search results, here is the code: var table = new Tabulator("#json-table", { layout:"fitDataFill", //initialFilter:[{field:"title", type:"!=", value:"ignoreList.title"}], ajaxURL:tabUrl, ajax ...

javascriptjqueryjsontabulator

Is there a way to select and style the nth-child element within a Bootstrap .card body?

I am experimenting with changing the background-color of the card-body in bootstrap 4, but I am unsure about how to access the card-body element since each body has a different parent (I believe my understanding is correct). Can this be achieved using the ...

cssbootstrap-4

In Bootstrap 5, the Col elements do not behave as inline elements

I have been attempting to create a column with 3 elements in a row: 2 buttons and 1 select dropdown Initially, I was able to achieve this layout with three buttons. However, when I replaced one button with a select dropdown, it stopped functioning properl ...

htmlcsstwitter-bootstrapbootstrap-5

When the class changes, V-for re-renders every component

Currently, I am in the process of changing classes for images based on their index using the moveIndex method and key events. While this works smoothly on computers, it seems to take significantly longer when implemented on TVs. The process runs smoothly w ...

javascripthtmlarraysperformancevue.js

Automating Indesign with HTML5 and JavaScript through IDML files

I am currently working on automating IDML files. My goal is to display an IDML template in an HTML5 editor. Within the sample.idml file, I have a basic TextFrame containing the text "Hello World." After unzipping the file and navigating to the stories fol ...

javascripthtmlangularjsautomationidml