I have successfully created a scroll to top and scroll to bottom feature using jquery. The scrolling is based on percentages, so if it scrolls from top to bottom at 50%, it will stop at 50%. Now, I am trying to figure out how to make the remaining 50% of the scroll happen when clicked again. Does anyone have any suggestions or ideas on how to accomplish this with jquery?
For reference, here is the fiddle: http://jsfiddle.net/TkYpY/
Thank you, vicky
$('#btnScrollTop').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var totalHeight = $(document).height() - $(window).height();
if(scrollPosition > 0 )
{
scrollPosition = scrollPosition - (totalHeight * percentage);
}
console.log('scrollPosition: ' + scrollPosition);
$('html,body').animate({
scrollTop: scrollPosition
}, 'slow', function () {
console.log("reached top");
});
});
var scrollPosition = 0;
$('#btnScrollBottom').on("click", function () {
var percentageToScroll = 50;
var percentage = percentageToScroll / 100;
var totalHeight = $(document).height() - $(window).height();
if( scrollPosition < totalHeight)
{
scrollPosition = scrollPosition + totalHeight * percentage;
}
console.log('scrollPosition: ' + scrollPosition);
jQuery("html, body").animate({
scrollTop: scrollPosition
}, 900);
});
The second click won't cause the page to scroll further since you've already reached the scrollAmount limit.
To continue scrolling beyond that point, define a variable called scrollAmount outside the function. Then, when clicking on the bottom link again, calculate the next scroll Amount while ensuring it doesn't exceed the document height limit. Add this new amount to the globally declared scrollAmount variable.
$('#headerTop').on("click", function () {
var scrollPercentage = 75;
var percentage = scrollPercentage / 100;
var currentHeight = $(document).scrollTop();
var distanceToScroll = currentHeight * (1 - percentage);
console.log('distanceToScroll: ' + distanceToScroll);
$('html,body').animate({
scrollTop: distanceToScroll
}, 'slow', function () {
console.log("reached the top");
});
});
var totalScrollAmount = 0;
$('#headerBottom').on("click", function () {
var scrollPercent = 45;
var percentage = scrollPercent / 100;
var fullHeight = $(document).height() - $(window).height();
totalScrollAmount = totalScrollAmount + fullHeight * percentage;
console.log('totalScrollAmount: ' + totalScrollAmount);
jQuery("html, body").animate({
scrollTop: totalScrollAmount
}, 900);
});
I made some changes to your code on the fiddle. It seems like there might be a calculation issue. You can find the modified fiddle here. Does this solution meet your requirements?
To start, create a global variable called height with a default value.
In the scroll function at the top, replace
var height = $(document).scrollTop();height -= $(document).height() - $(window).height();Then, in the bottom scroll function, replace
var height = $(document).height() - $(window).height();height += $(document).height() - $(window).height();I am working with an angular application and I am trying to figure out how to combine values from multiple inputs into one ng-model. Here is an example of my current input: <input type="text" class="form-control input-md" name="type" ng-model="flat.f ...
How can we retrieve and maintain data during app initialization or user login so that it persists throughout the application? Currently, every time a page is refreshed, the context is cleared and attempting to use getServerSideProps results in undefined ...
I have a question regarding asynchronous calls. My goal is to validate whether a given "code" is valid without refreshing the page. Here's the scenario in brief: I need to determine if a variable should be set to true or false based on the response ...
Currently, I am developing a website focused on HIV prevention information warehousing. Numerous collaborators will be contributing articles using a tinyMCE GUI. The design team is keen on having control over page lengths. They are interested in implement ...
I am currently working on a calculator website powered by Angular. This single-page site is fully responsive and divided into 7 sections, each featuring different calculators based on user preferences. To improve loading time, I am interested in implementi ...
I need help converting HTML text to plain text and displaying it in a TextView. However, I am encountering an issue where additional paragraphs are being added after the conversion. Please refer to the image https://i.sstatic.net/SxSf0.jpg Can someone exp ...
Here is the code snippet I am working with: /* Coded by @fitri This ReactJS project component was created with love https://codepen.io/fitri/full/oWovYj/ */ function enableDragSort(listClass) { const sortableLists = document.getElementsByClassNa ...
In PHP, I generate an array and then convert it to JSON format. This JSON data is processed with an onclick event and sent to another file using AJAX. The issue arises when some values in the PHP array contain spaces, causing the JSON object to break and ...
My attempt to paginate a subcomment named "Items" within a collection using mongoose-paginate-v2 has not been successful. Below is my model: const mongoosePaginate = require('mongoose-paginate-v2'); const PettyCashItemsSchema = ...
When trying to access the Coursera API on the client side, I encountered an issue with CORS blocking the request. JSONP was not a viable solution because the API is returning JSON data. My experience lies mainly in client-side development, so I am unsure ...
Hello, I encountered an issue with my code where it is adding empty values to the database when attempting to enter input text values. I am using PHP and MySQL for this task. <html> <body> <input type="text" name="value" /> <input ...
I have developed a tool for creating forms, but I am struggling to format the output neatly like pretty print. I have tried using \n and pre tags as well. allCont += "<label>"+insCleaned+"</label><input type='text' name= ...
I have the following situation, how can I make sure that the attachment field in the child component is accessible from the parent component? class ServiceDeskCustomerCreate extends Component { constructor(props, context) { super(props, context); ...
My aim is to increase the size of form fields when the cursor focuses on them, either through a mouse click or by tabbing using the keyboard. By utilizing document.activeElement focus, I can identify when the user clicks inside a text input or selects an ...
I have a unique banner ad that I want to display as the footer on my responsive website. Using media queries recommended in the advertising documentation, I am adjusting the size based on different screen widths. Check out the CSS code below: <style&g ...
Having issues adjusting the height of my Navbar - when I try to do so, the collapse button doesn't function properly. I've attempted setting the height using style="height: 60px;" and .navbar {height: 60px;} but the collapse menu stops ...
While using Jmeter in conjunction with Selenium WebDriver, I encountered an unhandled error "016/02/17 16:51:47 ERROR - com.googlecode.jmeter.plugins.webdriver.sampler.WebDriverSampler: :14:94 Expected , but found ; WDS.browser.findElement(pkg.By.cssSele ...
After months of working on a full stack React app, I encountered an unexpected error when trying to run npm run start from the command line. The error message was as follows: // npm run start > [email protected] start /Users/eden/Documents/GitH ...
Is it possible to test content containing an ng-if by updating a property on the controller's variable in the console? <div class="manager-only" ng-if="teamSchedule.userObject.isManager"> <a href="#add-game"> <input class=" ...
Currently, I am working on a ReactJS project utilizing MaterialUI. The code snippet I am dealing with is as follows: { this.state.categories.map((category, key) => ( <List> <ListItem button id={key} onClick={this.handleClick}> ...