Issues with the Tumblr platform's back-to-top button functionality

I am quite comfortable with HTML and CSS, but I'm struggling to make the 'back to top' button work on my Tumblr page. Can someone please give me a hand? I've included some JQuery code to make the text fade in and out when scrolling (infinite scroll past 100).

Thank you for your assistance.

L

    <html>
<head>
    <title>{Title}</title>
    <link rel="shortcut icon" href="{Favicon}">
    <link rel="alternate" type="application/rss+xml" href="{RSS}">
    {block:Description}
        <meta name="description" content="{MetaDescription}" />
    {/block:Description}
<link href='http://static.tumblr.com/twte3d7/DHIm5wmgi/stylesheet.css' rel='stylesheet' type='text/css'>



        <meta name="color:Background" content="#ffffff"/>
        <meta name="color:Text" content="#000000"/>
        <meta name="color:Video Corner Fold" content="red">
        <meta name="font:Font" content="'BrownBold'">
        <meta name="if:Show Captions" content="0"/>
        <meta name="if:Uppercase Links" content="0">
        <meta name="if:Fade On Hover" content="0">
        <meta name="if:Show Tags on Index Page" content="0">
        <meta name="image:header" content="0"/>

...
javascriptjqueryhtmlcss

Answer №1

The #header element is positioned above .archive, #toTop, and .random because of its higher z-index value (5000 / 9999).

To make #toTop clickable and functional, you can update the CSS for #header as follows:

#header {
  width: 100%;
  height: 100%;
  background: url('http://static.tumblr.com/e72d71d9df861d718427e82229f48499/yo2ke79/iMEn5bbly/tumblr_static_9kpmrzvkfosoo4o0g8k4g80oc.png')no-repeat;
  position: fixed;
  margin: 15px 50% 0 50%;
  top: 0px;
  left: -300px;
  right: -300px;
  z-index: 4999;
}

However, there seems to be a problem with requesting two versions of jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://masonry.desandro.com/js/jquery-1.7.1.min.js"></script>

The second link, 

http://masonry.desandro.com/js/jquery-1.7.1.min.js
, is not found. It's recommended to use a single version of jQuery from a CDN or upload it directly to Tumblr's CDN.

Answer №2

Why bother with the scrollTop when you can simply utilize a hyperlink instead?

<a href="#">Back to Top</a>

This method efficiently brings you back to the beginning of the page without any fancy animations. It's an ideal solution for those seeking straightforward 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

Tips for maintaining the dropdown selection when new rows or columns are added to a table

I have a task requirement where I must generate a dynamic table using jQuery. I've successfully implemented adding dynamic columns or rows to the table. Feel free to check out the fiddle code here. HTML: <div id='input_div' name='i ...

javascriptjqueryhtml

Obtaining the selected date value from a Vue.js datepicker

How can I calculate the difference in days between two selected dates in Vue.js before the form is submitted? I want to provide a price based on this calculation. I am using a Persian date picker, which you can find here: https://github.com/talkhabi/vue- ...

javascriptphplaravelvue.js

Image or Surface at the Front for Textural Effect

Looking for a way to add a background image layer on text using JS/CSS. Any solutions available? For example ...

javascriptcssimagetextbackground

Exploring the features of the AJAX event object within a callback setting

I have successfully implemented the Aquantum jQuery plugin for file uploads on my LAMP site. While it works well, I am now looking to add a success callback function that can insert both the uploaded filename and file URL into a form field. You can find ...

jqueryajaxfile-upload

Develop a pair of jQuery plugins that are able to communicate with one another

My mind is currently in disarray. I am interested in developing two unique jQuery plugins: A tab plugin A slider plugin. These plugins need to be able to communicate with each other. For example, clicking on a tab should activate the corresponding index ...

javascriptjquerypluginsjquery-eventsextends

Leverage jQuery to extract data from this JSON object

It seems like this should be a simple task! I'm currently working on submitting a form using jQuery/ajax, and the success output I receive is in the form of a JSON string as shown below: {"activities-tracker-steps":[{"dateTime":"2016-09-06","value": ...

jqueryjson

Tips for eliminating padding at the top and bottom of a navigation bar

I'm looking to remove the top and bottom padding from my navbar to give it a similar look to the navbar on Wix.com. I've spent most of today trying to figure this out. I've attempted to remove padding with !important from the navbar, tried u ...

cssnavbarbootstrap-5spacing

Tips for triggering the JavaScript function within dynamically created textboxes on an ASP .NET platform

I have developed code that dynamically creates textboxes in a modal pop-up each time the add button is clicked and removes them when the remove button is clicked. The validation function in this code checks for valid month, date, and year entries in the te ...

javascriptc#jqueryasp.net

Why isn't this code for hiding the animation and displaying it not functioning properly?

Why isn't this animation from display none to block working properly? The initial code appears as follows, and it functions correctly: $(".box_outer").stop().animate({top: '25px' , opacity: 1}, 100); When I add display: none; to the class ...

javascriptjquerycssanimation

What is the best way to configure AngularJS for optimal integration with Google Maps services and functionalities in an "angular way"?

I'm currently working on a new app that utilizes the Google distance matrix, directions service, and various map features such as custom markers. I'm curious - where do you think is the best place to house all of this different functionality? Sho ...

javascriptgoogle-mapsmodel-view-controllergoogle-maps-api-3angularjs

The functionality of ng-click and ng-submit seems to be malfunctioning

I am currently facing an issue with my Angular application and PhoneGap. I have a login form along with a login controller set up, but for some reason, the ng-submit function is not working as expected. When the submit button calls the formConnexion() func ...

javascriptangularjscordova

Executing multiple server-side methods on an AJAX call in ASP.NET MVC: A comprehensive guide

I am facing a situation where I have a method that is called by jQuery, and its result is displayed on a popup. Sometimes, it takes some time to complete and a blank popup appears with processing message. When clicking on close, the popup disappears but th ...

javascriptjqueryajaxasp.net-mvc

Changing the default view in Ionic

I'm facing a simple issue that I can't seem to solve. I've set up a blank project in Ionic and I want to make a default home screen the first view that loads. However, all I see is a blank screen when I run it in the browser. Here's my ...

htmliosangularjscordovaionic-framework

Using $(this) while inside a callback function

I am currently in the process of switching from using prompt() to jPrompt() because Internet Explorer blocks prompt() from running. The issue I'm facing is that $(this) no longer functions correctly with jPrompt() since it doesn't return a value ...

jquery

Can the serialization of AJAX URL parameters in jQuery be customized?

Is there a way to instruct jQuery or an AJAX call on how to format query string parameters other than writing a custom serializer? I am using a jQuery AJAX call and passing an object with URL parameters var params = {name: 'somename', favColors ...

javascriptjqueryajax

Activate Bootstrap 4 modal screen by utilizing ajaxStart and ajaxStop functionality

How can I trigger the modal screen to appear during ajaxStart and disappear during ajaxStop events? Despite trying various solutions found on Stack Overflow, I am still unable to achieve the desired functionality. Below is the Bootstrap 4 modal code snip ...

jquerybootstrap-4bootstrap-modal

ES5 approach to Angular2 HTTP Providers (not TypeScript)

I'm currently developing an application and experimenting with Angular2 using ES5 JavaScript for fun. My main inquiry right now is how to access the Http service. Most of the available documentation is in TypeScript, which is not very helpful, or it p ...

javascriptangular

Unusual sizing of text input in jQuery Mobile

I've encountered an issue regarding the width of a text input in jQuery Mobile - it appears to be too large. <div data-role="page"> <div data-role="header"> <h1>Test</h1> </div> <div data-role="co ...

jqueryjquery-mobile

Exploring angularjs and the concept of variable scoping in relation to

Struggling with variable binding in my angularjs/javascript code for uploading images. Can someone help me out? Here is the snippet of my code: var image_source; $scope.uploadedFile = function(element) { reader.onload = function(event) { image_sourc ...

javascriptangularjs

Restricting the amount of requests per user within a single hour [Node.js]

As I work on developing a server side application using Nodejs and Express, one thing that crosses my mind is limiting the number of requests per user within a specific time frame to prevent malicious hackers from overwhelming the server with spam. I&apos ...

javascriptnode.jsexpressmiddlewarerestful-authentication