Tips for placing an element in the top left corner and turning it into a functional "back to top" button

I need to add a "back to top" button on my website and I want to place it in the top left corner, as shown in the image above. Here is the HTML code I am using in my Jekyll site:

<body>
    <a name="top"></a>
    <a href="#top" id="toTop">TOP</a>
    <header id="head"><span id="ruby">text</span> text</header>
    <nav><ul>— {% for post in site.posts reversed %}{% if post.layout != 'no-title' %}
      <li><a href="#{{ post.anchor }}">{{ post.title }}</a></li>
    {% endif %}{% endfor %} —</ul></nav>
    <section id="content">
      {{ content }}
    </section>
    <small id="soon">— More content soon —</small>
    <footer><!-- content --></footer>
    <script>
      <!-- script -->

      $(document).ready(function(){$("a[href*=#]").click(function(){if(location.pathname.replace(/^\//,"")==this.pathname.replace(/^\//,"")&&location.hostname==this.hostname){var a=$(this.hash);a=a.length&&a||$("[name="+this.hash.slice(1)+"]");if(a.length){var b=a.offset().top;$("html,body").animate({scrollTop:b},1000);return false}}})});
    </script>

The minified script at the bottom is from CSS Tricks (smooth scrolling). Here is the CSS I have added:

a#toTop{
position: fixed;
top: 5px;
left: 5px;
text-align: left;}

Unfortunately, the results I am getting are not as expected. You can find most of the site's content on this Gist.

Answer №1

If you're looking to implement a scroll-to-top feature, consider the following approach:

HTML:

<body>
    <a id="scrollToTop"></a>
</body>

CSS:

body {
    position:   relative;
}

#scrollToTop {
    position:   absolute;
    top:        5px;
    left:       5px;
    text-align: left;
}

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

The functionality of JQuery ceases to function properly once the BxSlider plugin is activated

I've encountered a strange issue while using the BxSlider plugin of jQuery on my page. When I implement the code for the slider with BxSlider, all other custom functions seem to stop working without any errors being displayed in the console. I've ...

What is the process for calculating the total sum of input values utilizing JavaScript?

My JavaScript skills are not perfect, and I'm struggling to calculate the total sum of values in the amount input boxes without refreshing the page. Can someone assist me with this challenge? Thank you. function Calculat ...

Basic use of AJAX for sending the value from jQuery's datepicker

As a novice in JavaScript and AJAX, I'm hoping for your patience as I navigate my way through. In the scope of this project, I am utilizing the CodeIgniter framework. My objective is to implement a datepicker and transmit its value via AJAX. Below is ...

What is the best way to extract all image URLs from a website using JavaScript?

There are various methods to retrieve image src urls using JavaScript, such as utilizing document.images or by targeting all img elements and fetching their src attributes. However, I am currently unable to extract the image urls specified within CSS styl ...

Tips for activating the Highcharts scroll bar?

I attempted implementing the scrollbar: { enabled: true } However, I was unable to get it to function properly. I also tried utilizing the highcharts.js that is included with highstocks, but unfortunately, that didn't work either. Do you have ...

Issues with $.getjson and trouble with storing JSON data

My current issue involves attempting a getJSON call to a page on my domain that contains a simple JSON array. However, the script in my webpage is not returning anything as expected. <script> $('#genButton').click(function() { ...

What is the best way to save a JavaScript array in HTML5 local storage?

I am looking for a way to store an array of inputs using the local storage feature of HTML5. Currently, I am able to add weight inputs to the array, but they disappear once I refresh the page. Can anyone assist me with this? <!DOCTYPE html> <html ...

json data hidden from sight in jQuery

Snippet of HTML Code: <select name="ser" id="ser" class="form-control" onchange="getPrice(this.value);"> <option value="">--Select--</option> <option value="Value11">Value1</option> <option value="Value2">Value2</op ...

Applying ngClass to a row in an Angular material table

Is there a way I can utilize the select-option in an Angular select element to alter the css-class of a specific row within an Angular Material table? I have successfully implemented my selection functionality, where I am able to mark a planet as "selecte ...

Can an XSS attack occur on a style tag with inline styling?

For example: <!DOCTYPE html> <html lang="en"> <head> <title>Test for Potential XSS Attack</title> <style> div { background-color:blue; height:120px; ...

The ordering class is malfunctioning within the dropdown-menu of Bootstrap 5.2

I am having an issue with the order class when using a list-group inside a dropdown-menu in Bootstrap 5. I checked the documentation on ordering classes in Bootstrap 5 but I can't seem to get it to work inside the dropdown-menu. Here is a sample of t ...

Ways to Ensure the Footer Stays Beneath Your Image Gallery

After successfully keeping the footer at the bottom of other pages on my website, I'm facing a challenge with my photo gallery page. The footer stubbornly sits in the middle of the page. :( This is the HTML code for that particular page: html { ...

Upgrading a bootstrap 3 class to bootstrap 4

Can someone help me update the classes col-sm-push-9 and col-sm-pull-3 from bootstrap-3 to bootstrap-4 in the HTML code below? <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width"> <titl ...

Adding Tooltips to Your Bootstrap 5 Floating Labels Form: A Step-by-Step Guide

Can you include tooltips or popovers in Bootstrap 5 floating labels text? I've set up a form with floating form fields and I'd like to provide instructions for certain fields using tooltips or popovers. I can make it work with the standard form ...

Troubleshooting Rails 5 and AJAX modal login issues

In my pursuit of implementing ajax authorization in Rails 5.0.0, I have tried numerous guides without success. Here's what I've done: 1. Cloned the Devise Controllers Users::SessionsController < Devise::SessionsController def create re ...

The .val() method is compatible with input fields, but does not work

Having trouble retrieving the value from a textarea input. Switched to an input field and it's working fine. Note: The issue seems to be related to tinyMCE. Removing tinyMCE allows the code to work properly. Any thoughts on this? $('.answer ...

retrieving data from a different controller through a view

I am currently working on a Ruby on Rails project that involves using ajax to update various sections of a page. In my setup, I have a posts_controller responsible for displaying a collection of posts. Each post can be toggled between 'hidden' an ...

The date in the JSON response does not align correctly

Seeking insights into this issue, I am currently utilizing the code below to generate a JSON response through an AJAX request console.log('get_therapist_sessions', response); response.forEach(function(item){ console.log(item); ...

Creating custom components in React

At times, I find myself in need of a special UI component such as a multiple range slider. However, I have a preference for not relying on third-party libraries, so I usually opt to create the component myself. As time has passed, I have completely stopped ...

What are the steps for adding JQuery UI to a Blazor WebAssembly project?

I am delving into the world of Blazor and attempting to migrate a project from .NET Core MVC to Blazor WebAssembly. I have successfully configured basic HTML and CSS design, with everything functioning as expected. However, I have encountered an issue on a ...