What is the best way to navigate to the bottom of a website, similar to a "back to top

I have implemented a code snippet on my blog to go "Back to top" using a combination of HTML, CSS, and JavaScript. Now I am looking to add functionality for the opposite action, which is to "Go to Bottom". The code for going back to the top looks like this:

HTML

<div id="back-top">
<a href="#top">
<img src="http://4.bp.blogspot.com/-6KDdSchHT18/Uvxj4CJipXI/AAAAAAAAE4k/wyk-sSq5gbc/s1600/Back-to-top.png"/><br/>Top</a></div>

CSS

#back-top a{text-decoration: none;}
#back-top {
color: #ff0000;
position: fixed;
bottom: 25px;
left: 125px;
font-weight: bold;
}

JavaScript

$(function (){ 
$(window).scroll(function (){
if ($(this).scrollTop() > 300){
$('#back-top').fadeIn();
} 
else{
$('#back-top').fadeOut();
}
});

How can I create an alternative option for this?

javascriptjqueryhtmlcss

Answer №1

One clever technique is to add a simple div at the very end of your webpage:

<div id="end"></div>

Afterward, you can create a link that directs users to it using:

<a href="#end">Scroll To End</a>

Answer №2

For a smooth scrolling effect to reach the bottom of the page, you can implement this:

VIEW DEMO

$(function (){ 
    var bodyHeight = $('body').height();

    $('#back-bottom a').on('click', function(){
        $('html, body').animate({scrollTop: bodyHeight}, 300);
    });
});

Answer №3

<span id="here">&nbsp;</span>

<div id="back-bottom">
<a href="#here">
<img src="http://4.bp.blogspot.com/-6KDdSchHT18/Uvxj4CJipXI/AAAAAAAAE4k/wyk-sSq5gbc/s1600/Back-to-top.png"/><br/>Bottom</a></div>

Give it a shot!

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

Adding a JavaScript file to the header in CakePHP using the view section

The CakePHP documentation states: By default, script tags are inserted into the document in-line. If you wish to change this behavior, you can set $options['inline'] to false. This will cause the script tags to be placed in a script block whic ...

javascriptphpjquerycakephp

Switch the functionality of a Google Chrome extension back and forth numerous times

My Google Chrome extension works by attaching event listeners to all elements on a page and inserting CSS (lol.js and style.css) when clicked. However, I am facing an issue where I cannot remove the JS and CSS upon clicking the icon again. Right now, I am ...

javascriptjquerygoogle-chrome-extension

Having difficulty transferring image files to a MySQL database through ajax jQuery in PHP

I'm running into an issue where I can't seem to upload image files to my MySQL database after submitting the form. Whenever I try, I receive this error message: Uncaught TypeError: Illegal invocation This error is showing up in the console ta ...

phpjqueryajaxpdo

Implementing the dblclick event handler with jQuery on multiple elements

I am facing an issue while trying to bind a double click event to divs within a nodeList that I am looping through. Below is the code snippet: var elements = document.getElementsByClassName("click"); currentElement = elements[0].id; for (var i=0; i<ele ...

javascriptjquery

"Troubleshooting issues with the functionality of AngularJS - Bootstrap Material Datetimepicker

I recently implemented a datetimepicker from this datetimepicker library into my AngularJS project. I have included jQuery, Moment, and the datetimepicker in the head tag. The input field is nested within an ng-repeat, and I have initialized the datetimepi ...

javascripthtmlangularjs

Authenticate users using JavaScript usernames

Below is my registration link that opens a modal: <a href="#registermodal" data-toggle="modal">Register Here</a> Here is the code for the modal dialog: <div class="modal fade" id="registermodal" role="dialog" style="overflow: scroll;"> ...

javascriptphpjqueryajaxauthentication

``How can I effectively handle and display Angular JSON text in an alert message?

Is there a way to pass a JSON entry into the onClick event for triggering an alert box in AngularJS? I'm attempting to display a message box with the content of a specific JSON entry when clicking on a row within a table. The issue seems to be isolat ...

javascriptangularjsjson

utilize reactjs to display API information on the frontend through polling

When attempting to fetch data from an API and display it on the frontend using React, I encountered an error on the frontend side which states (TypeError: answers.map is not a function). How can I resolve this issue? MY CODE IS - import React, { useState, ...

javascriptnode.jsreactjsreact-nativereact-redux

This issue with the jQuery function requires a double-click action to

During your visit to our website , you will notice a navigation bar at the top that can be either hidden or expanded. When the navigation bar is expanded (by default), it requires two clicks to minimize it, although it appears to only respond to the first ...

jquery

Expanding to a full width of 100%, images on desktop screens are displayed larger than their original

I am facing a challenge with my three images lined up in a row, each with a width of 323px. In order to make my website responsive, I decided to switch from using width: 323px; to width: 100%;. While this adjustment worked well on mobile devices, I encoun ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Tips for transferring information to a textarea within a bootstrap modal by selecting a cell in a table

I need to enable users to edit information in a table. One cell in the table contains text. Here is an excerpt from the table: <table class="table table-striped table-hover" id="table_id"> <thead> <tr> <th>Event</th& ...

javascriptjquerytwitter-bootstrapbootstrap-modal

React Router 4 - Optimizing Component Refresh by Remounting Instead of Re-Rendering

I am currently in the process of configuring a React project that utilizes React Router 4 ("react-router-dom": "^4.3.1"). Within this project, I have implemented a SideBar, a NavBar, and the main content section of the application which changes based on th ...

javascriptreactjsreact-router-v4react-router-dom

When jQuery's `foo.html("<span>bar</span>")` doesn't alter `foo[0]`, what implications does it have?

While using jQuery in Firebug, the following actions are taken one by one: foo = $('<div>foo</div>') foo[0] // => <div> foo.html('<span>bar</span>') foo.html() // => "<span>bar</span> ...

javascriptjqueryinnerhtml

Simulate a failed axios get request resulting in an undefined response

I'm having an issue with my Jest test mock for an axios get request, as it's returning undefined as the response. I'm not sure where I might be going wrong? Here is the component with the axios call: import {AgGridReact} from "ag-grid- ...

javascriptreactjsjestjs

The CSS transition timing seems to be malfunctioning as not all elements are smoothly transitioning, specifically the text within the li and anchor tags is not

I'm attempting to achieve a smooth transition effect on a navbar when hovering over it, changing the color from one to another. The navbar contains a list of words, but I am encountering an issue where during the transition, there is a quick flash (ap ...

htmlcssangularsass

A guide on invoking a servlet using a jQuery $.ajax() call

I am having trouble calling a servlet using jQuery's .ajax() function. It seems like the servlet is not being called or parameters are not being passed to it. Despite searching extensively online, I have not been able to find a solution. Any suggesti ...

javascriptjqueryajaxservletspost

What is the process for inserting additional information into a geoJson file?

In the "gj" object, I need to add new properties from the "dataToAdd" array. The current format of "gj" is as follows: const gj = { "type": "FeatureCollection", "features" : [ { "type": "Feature", "geometry": { ...

javascriptarraysgeojson

A guide on extracting the values of checked checkboxes by their ID using javascript

I'm currently attempting to extract the values of selected checkboxes. These checkboxes have distinct IDs because they are specified within a modal window. <input type = 'checkbox' id = 'audience_Name-$row[asset_ID]' value = &a ...

javascriptphparraysajax

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

javascripthtmlcss

Retrieve information and functions from one component in a separate component

I currently have two components: ContainerSidebar.vue <!-- Sidebar --> <div id="b-sidebar"> <div class="change-image"> <img :src="profile.avatar != null ? profile.avatar+'#&apo ...

javascriptvue.js