Navigate through the content with ease using a jQuery plugin that allows for smooth

Currently, I am in search of a scroll down functionality for my page that will smoothly navigate through the content page by page.

I came across a plugin that offers such functionality, but it uses page sections for scrolling purposes.

If you're interested, here's the link to the plugin:

Ideally, I am looking for something that can automatically calculate the length of the page and then divide it into pages if the length surpasses the height of the screen (be it a monitor, laptop, or mobile screen).

If you have any insights or pointers on how to achieve this, it would be greatly appreciated. I don't necessarily need a full solution right now, just some guidance or ideas to get me started.

As an example, I am currently experimenting with this code snippet: http://jsfiddle.net/8L5xjf0h/1/

<div class="scroll-pointer">&#8659;</div>
javascriptjqueryhtmlcss

Answer №1

One way to determine the height of your HTML page is by using $(document).height();

You can calculate the ratio of the page height to the viewport height with $(window).height();. So:

var viewHeight    = $(window).height();
var pageHeight    = $(document).height();
var numberOfPages = pageHeight/viewHeight;
var goToPage = function(page){
    window.scrollTo(0, (page-1)*viewport);
}

Although this method works, it currently lacks responsiveness (changes in screen size do not impact page size). Consider making adjustments for responsiveness.

If this does not fully address your query, please inform me so I can make revisions.

Answer №2

Have you had a chance to explore fullPage.js with the setting scrollOverflow:true?

Check out this demonstration.

You could also try using regular scrolling by utilizing autoScrolling:false as shown in this alternate example. The navigation menu will still smoothly guide you through the page.

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

Removing selected row(s) from a table using Angular

I have a table that looks like this: <p-dataTable [value]="example"> <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column> <p-column field="a" header="column 1"></p-column> ...

htmljsonangulardatatableprimeng

The Axios controller sends form data and retrieves an object as the response

//Vuejs2 //Laravel v7.x I have hit a roadblock and cannot seem to find a solution. I am trying to retrieve data from my object in the controller. In my View.vue file, I am using axios to make a post request. data() { return { custom ...

javascriptlaravelvue.jsvuejs2axios

Observing nested objects in Vue while utilizing deep watching功能

Is there a way to determine which property change in the object triggered the watch call while watching a data object with multiple properties using deep invocation? data(){ return { user:{ first_name:'', last_na ...

javascriptvue.js

Tips for efficiently managing user details across multiple controllers in AngularJS

Hello everyone, I'm wondering how I can manage user session ID and name across view controllers in AngularJS. Here's the scenario: I made an HTTP call and retrieved the user ID and name. Now, I want to be able to access this information in any c ...

javascriptangularjs

Loading a hyperlink within the current webpage using HTML

One of the functionalities I am working on involves loading a chart in the same page when an option is clicked, while keeping the options visible on the left side of the page. The web design layout we are aiming for is provided below. For example, if the " ...

javascriptjqueryhtml

Verify whether all of the iframes have finished loading

I am facing an issue with running a function when multiple iframes on the page are loaded using jQuery. The function works fine when there is only one iframe, but as soon as there are more than one, it stops working. Below is the code I am currently using: ...

javascriptjquery

Require a click for activation post adding the element

Check out the code snippet below: HTML: <p>Click this paragraph.</p> JS: $("p").on("click", function(){ alert("The paragraph was clicked."); $("body").append("<p>This was newly added. This also has a click event.</p>" ...

javascriptjquery

JSFiddle Functioning Properly, But Documents Are Not Loading

My JSFiddle is functioning properly, but the files on my computer aren't. It seems like there might be an issue with how they are linking up or something that I may have overlooked. I've checked the console for errors, but nothing is popping up. ...

javascriptjqueryhtmlcss

Uploading a series of files using custom names provided by the user

I am looking to enhance my file upload functionality by allowing users to enter custom names for multiple files. For a single file, I have successfully implemented the method to change the name as shown below: <form action="submit.php" method="post" cl ...

phphtmlfile-upload

Exploring the realm of unit testing in the NestJS CQRS architecture journey

We're currently working on writing unit tests using Jest for our application and are facing difficulties in testing sagas. Specifically, we're having trouble testing the saga itself. During our unit testing process, we've encountered an iss ...

javascriptunit-testingjestjsnestjssaga

The functionality of Angular Datepicker is disrupted when scrolling through the page

Coding in HTML <div class="col-5 col-md-3 px-0 daterange-picker"> <div class="form-group"> <div class="input-group"> <input type="text" id="second ...

javascripthtmlcssangularangular-ui-bootstrap

What is the best way to create a new browser window for a pop-up?

Using the following JavaScript code will open a popup: window.open('http://www.google.com','mywindow','width=400,height=200'); If you call it two times like this: window.open('http://www.google.com','mywindow ...

javascript

Mongoose only pushes the ObjectID, and not the entire document

I run a recipe blog website where each recipe has its own set of comments. All comments are stored in a collection, but when I associate a comment with a specific recipe, only the ObjectID gets saved. Below is the code snippet: Recipe model const { D ...

javascriptnode.jsexpressmongoosepush

Leveraging the power of Flask and AJAX

Recently, I added a new feature to my web app built with Flask. The feature involves making a geocoding request to Google using Ajax when a button is clicked. Here's the function in loc_gm.js that gets called: $(function() { $('#geo_google' ...

javascriptjquerypythonajax

Steps for transmitting XML data from Ajax to a Spring Controller

I've been encountering an issue while attempting to send XML data from jQuery AJAX to a Spring controller and then trying to parse the XML in Java. Unfortunately, I'm stuck at this point and unable to move forward. Could someone kindly assist me ...

jqueryajaxxmlspringspring-mvc

Attempting to substitute an array of substrings in a string by utilizing a loop within a .then function, but encountering difficulties outside of the promise's .then block

I am facing an issue with replacing substrings in a string using a loop. When I replace the substring values and console log inside the loop, it shows the expected result. However, when I try to console log outside the loop, it displays the original stri ...

javascriptreactjspromise

Images that float to the right can escape the boundaries of their div container

I'm struggling to find a solution for my current HTML setup. Here's what I have: <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("slow"); }); }); </script> <style type="text/cs ...

javascriptjqueryhtmlcss

jQuery Animation Issue: SlideDown Effect Not Working as Expected

I'm feeling quite confused about this situation. I've been attempting to utilize the slideDown function in jQuery, but when I click on the 'information' div, it just jumps instead of animating smoothly. I suspect that one of the cause ...

javascriptjqueryhtmlcssslidedown

The clientWidth and scrollWidth properties will constantly be the same

I am currently utilizing Vuetify text-fields and aiming to exhibit a tooltip showcasing the content only if it exceeds the field width (requiring user scroll). The tooltip should solely be visible on hover, as per default behavior. My initial approach ensu ...

javascripthtmlvue.jsvuejs3

Improper structure of a JSON for creating a JSON object using JSON.parse

I have a website that generates a tree structure. The file inicio_pru.php creates a JSON representation of the tree, which is then passed to a JavaScript file for rendering the tree. inicio_pru.php is called in two different scenarios. Firstly, when the p ...

javascriptphpjqueryjsonajax