Is there a way to horizontally navigate a pallet using Next and Prev buttons?

Question

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

As someone new to development, I am looking for a way to scroll my question pallet up and down based on the question number when I click next and previous buttons.

In my pallet div, there are over 200 questions which are dynamically generated. However, there may be instances where there are fewer than 200 questions.

Here is a snippet of my code:

Within my next button, I have the following function written:

function next(id) {

if (id >= 40 && id < 79) {
    $(".question-container").animate({scrollTop: 370}, 'fast');
}
if (id > 80 && id < 119) {
    $(".question-container").animate({scrollTop: 740}, 'fast');
}
if (id > 120 && id < 159) {
    $(".question-container").animate({scrollTop: 1110}, 'slow');
}
if (id >= 160 && id < 200) {
    $(".question-container").animate({scrollTop: 1480}, 'slow');
}
if (id >= 200 && id < 240) {
    $(".question-container").animate({scrollTop: 1850}, 'slow');
}
if (id >= 240 && id < 300) {
    $(".question-container").animate({scrollTop: 2220}, 'slow');
}

Can anyone provide assistance with this?

Thank you, Thangavel

javascript jquery html css

Answer 1

Answer №1

If you're looking for a quick fix, one solution could be to utilize the window.scrollTo() method after determining the top position of your desired element.

function scrollToElement(item) {
  var topPosition = document.getElementById(item).offsetTop;
  window.scrollTo(0, topPosition);
}

p {
  height: 800px;
}

<button onclick="scrollToElement('one')">Scroll to element</button>
<p></p>
<div id="one">This is the target element</div>

Alternatively, you could consider using a jQuery plugin like "carousel". There are numerous options available online, but if you want to try out my version, it's accessible here: https://github.com/gibbok/jquery-slidertv

Answer 2

If you're looking for a quick fix, one solution could be to utilize the window.scrollTo() method after determining the top position of your desired element.

function scrollToElement(item) {
  var topPosition = document.getElementById(item).offsetTop;
  window.scrollTo(0, topPosition);
}

p {
  height: 800px;
}

<button onclick="scrollToElement('one')">Scroll to element</button>
<p></p>
<div id="one">This is the target element</div>

Alternatively, you could consider using a jQuery plugin like "carousel". There are numerous options available online, but if you want to try out my version, it's accessible here: https://github.com/gibbok/jquery-slidertv

Answer 3

Answer №2

Utilize the following code snippet:

 window.scrollBy(0, 10);

in your JavaScript to initiate a downward scroll of 10 pixels. Feel free to modify the value to adjust the scrolling distance as needed. For further information, visit this link

Answer 4

Utilize the following code snippet:

 window.scrollBy(0, 10);

in your JavaScript to initiate a downward scroll of 10 pixels. Feel free to modify the value to adjust the scrolling distance as needed. For further information, visit this link

Is there a way to horizontally navigate a pallet using Next and Prev buttons?

Answer №1

Answer №2

Similar questions

Elevate Your Designs: A New Perspective on Vertical Alignment

What is the best way to transfer a value to v-model using emit?

React error: Unable to iterate through items because property 'forEach' is undefined

Utilizing commas in JavaScript

What is the best way to save the content of an RFC822 message body as a String?

Currently, I am expanding my knowledge of PHP and MySQL by working on a dynamic form that utilizes arrays. As I progress through the project,

Tips for retrieving the output from an Azure Function

Is there a way to modify the image source upon clicking a button?

Exploring the equality of objects in NodeJS

Guidance on sharing an image on Twitter using Node.js

Implementing a function as the `data-*` attribute for an element in Angular 6

Error: JavaScript encountered an unterminated string literal issue

Creating a simple Node.js project using material web components - a step-by-step guide

Creating Production Files for Web using RxJs and TypeScript

Using JQuery Noty in combination with Codeigniter Framework

What are some effective ways to utilize asynchronous ORMs without getting bogged down in overly long callback

Drag near the bottom of a droppable DIV to scroll inside

Backdrop styling for Material-UI dialogs/modals

The initial attempt at an Ajax post may be unsuccessful, but it usually succeeds on the second try

Define variables using specific class components only