Return to the left button with CSS or JQuery

I am seeking answers to two specific questions:

  1. While there are myriad examples available for animating a "back to top" button using CSS or JQuery, is there any similar example for animating a "back to left" button for horizontal scrolling?

  2. How can I link button A to button B on the same page and have them play in a loop? Essentially, I want clicking button A to move to the position of button B, and clicking button B to return to the position of button A.

If anyone has suggestions or solutions, please share.

javascriptjqueryhtmlcss

Answer №1

To connect those two buttons, the code could be structured in the following way:

a {
  text-decoration: none;
  }
<button id="one"><a href="#two"> ONE </a> </button>

<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>


<button id="two"> <a href="#one"> TWO </a> </button>

Answer №2

When it comes to the initial query: using the window.scrollTo() function requires inputting two parameters - the vertical position (in pixels) you wish to scroll to and the horizontal position. To navigate all the way back to the left without changing your current vertical scroll, simply execute the following line of code:

window.scrollTo($(window).scrollTop(), 0);

In regards to the follow-up inquiry, assigning unique IDs to both buttons is a feasible solution. For example:

<a id="uniqueBtn1" href="#uniqueBtn2" class="button">Button 1</a>

<a id="uniqueBtn2" href="#uniqueBtn1" class="button">Button 2</a>

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

Updating the authentication code in passport.js

In the project, there is a passport.js file that contains authentication related code: const axios = require('axios') const uuid = require('uuid/v4') const passport = require('passport') const LocalStrategy = require('pa ...

javascriptnode.jsexpresspassport.js

When using the hasMany/belongsTo relationship in VuexORM, the result may sometimes be

I have carefully followed the documentation and set up 2 models, Author and Book. The relationship between them is such that Author has many Books and Book belongs to an Author. However, despite having the author_id field in the books table, the associatio ...

javascriptvue.jsvuejs2vuexvuex-orm

picture to follow

When creating a page using canvas, the code in the body section might look something like this: <body> <canvas id="myCanvas" width="1300" height="1150"> </canvas> <img src="arbit.png" width ="1000" height="1000" /> </body> ...

htmlcanvas

The autoIncrement feature is causing a syntax error at or near "SERIAL"

Encountering a build error : Unable to start server due to the following SequelizeDatabaseError: syntax error at or near "SERIAL" This issue arises only when using the autoIncrement=true parameter for the primary key. 'use strict'; export ...

javascriptangularjspostgresqlsequelize.js

Steps for Adding an H1 Tag Using GWT

Forgive me for what may be a silly question, but I'm truly struggling to understand how to dynamically add an HTML heading tag to my page using the Google Web Toolkit. My motivation is not related to styling purposes, as any label can be styled. Inst ...

htmljquery-uigwt

What is the best way to send a file object to a user for download?

When working within a route: app.get('some-route', async (req, res) => { // ... } I am dealing with a file object called file, which has the following structure: https://i.stack.imgur.com/ByPYR.png My goal is to download this file. Cur ...

javascriptnode.jsexpress

Activating/Deactivating a button with just a press

In my SQL data display, each row has an "Add To Zip" button that is initially enabled. I want to disable the button in the current row when it's clicked and later re-enable them using a different PHP file. What's the best way to achieve this with ...

phphtmlajax

Take out the "href" attribute from the parent element

I'm looking to disable the link for the "parent li" in a dropdown menu when viewed on mobile. Here's the HTML structure: <ul> <li class="parent"></li> <li class="parent"></li> <li class="parent"></li&g ...

jquerytoggle

Clear all overflowing elements on a webpage and conceal any visible scrollbars

Is there an easy method to hide all overflow on an HTML page that has multiple CSS files linked? The issue is with preventing the scrollbar from appearing on the page, and we have limited control over the content. ...

jqueryhtml

Trouble with implementing an onclick event listener in a foreach loop

While generating and adding HTML in a for loop, I noticed that adding onclick events within the same loop is not functioning correctly: items.forEach(item => { itemHtml = `<div class="${item.id}">${item.id}</div>`; $(".it ...

javascriptjqueryonclick

Implementing expiration dates or future dates with jQuery

How can I modify this jQuery code to display an expiration date specified in months or years? For instance, I have created a Membership Card for a client that is valid for 2 years, and I would like to include an expiration date in the script. Thank you j ...

javascriptjquerywordpress

executing a dynamic search function using AJAX without reloading the page

As a beginner in using AJAX, I am facing some challenges with it. Can someone provide assistance? My issue is related to a dropdown selection that should trigger the printing of queries in a table's tbody. Below is my code snippet: The PHP code: < ...

phpjavascriptjquerymysqlajax

Receiving a Promise<fullfield> as a result

I have a situation where I am adding several promises to an array: const apiCallsToMake = []; apiCallsToMake.push(this.getDataFromUnsplash(copyInputParams)); apiCallsToMake.push(this.getDataFromPexels(copyInputParams)); apiCallsToMake.pu ...

javascripttypescriptasynchronousasync-await

Creating a Authentic Screw Top Appearance with CSS

I am striving to create a realistic screw head. Here is what I have done so far: <div class="screw"><div class="indent"></div></div> .screw { position: absolute; top: 10px; left: 49%; width: 30px; height: 30px ...

javascriptjquerycsshtml

Ubuntu is experiencing a DNS problem. While the URL request works perfectly on MacOSX, it is unsuccessful on Ubuntu

A custom nodeJS script has been developed to utilize the require('request').post() method. The script executes successfully on MacOSX (Travis), however encounters issues on Ubuntu (Travis). To troubleshoot, experimentation with NodeJS 'https ...

javascriptnode.jsubuntutravis-ci

Using jQuery to make an object fade in upon the page reloading

I have implemented an Ajax based form with 3 radio buttons. The functionality works smoothly - when one button is checked, div1 fades in, if two are checked, div1 fades out and div2 fades in, and so on. However, I am facing an issue with the success and e ...

jquery

Prevent double clicking on the body element

How can I prevent double-click on the body element? I have attempted to use the following code, but it does not seem to be effective. $("*").dblclick(function (e) { e.stopPropagation(); e.preventDefault(); return false; }); ...

javascriptjqueryhtml

"Getting the @connect decorator to integrate seamlessly with redux-saga: a step-by-step guide

What are some effective strategies for combining the use of connect from react-redux as a decorator with redux-saga? import React from 'react'; import { connect } from 'react-redux' @connect(({ data }) => ({ data }), require(' ...

javascriptreactjsreduxredux-saga

"Using JavaScript to extract a portion of the URL and perform a redirect

I am attempting to extract a specific part of the URL and then redirect to that particular section. Essentially, what I want is for a script to generate a link that will be opened. This link would appear as . My goal now is to extract the portion of the ...

javascript

Enhance Your Scene with Three.js Object Layering

Currently, I am showcasing three objects on the screen that can be selected by a click (I am only changing their color upon clicking at the moment). My goal is to have the selected object come to the forefront of the camera when left-clicked (including rot ...

javascriptwebglthree.js