I have a webpage that has Horizontal Y and vertical X scroll bars I use a JavaScript to stop the screen resetting when the user scrolls down to the bottom of the screen.
How do i stop the resetting when the user scrolls to the right?
window.onload = function [] {
var scrollY = parseInt[''];
if [!isNaN[scrollY]] {
window.scrollTo[0, scrollY];
}
};
window.onscroll = function [] {
var scrollY = document.body.scrollTop;
if [scrollY == 0] {
if [window.pageYOffset] {
scrollY = window.pageYOffset;
}
else {
scrollY = [document.body.parentElement] ? document.body.parentElement.scrollTop : 0;
}
}
if [scrollY > 0] {
var input = document.getElementById["scrollY"];
if [input == null] {
input = document.createElement["input"];
input.setAttribute["type", "hidden"];
input.setAttribute["id", "scrollY"];
input.setAttribute["name", "scrollY"];
document.forms[0].appendChild[input];
}
input.value = scrollY;
}
};
In many websites having long contents we have seen a "Back To Top" or "Scroll To Top" button when a click takes you to the top of the webpage. We see this kind of feature normally on the product listing pages of e-Commerce websites. Today in this article we will implement the same feature in one of the easiest possible ways. To integrate this feature, we need a little HTML, some CSS for styling and a couple of lines of jQuery code. Using the following method, you can integrate the “Back To Top” feature on your website irrespective of the programming language of your website, be it ASP.NET or PHP.
To start with, we will create a HTML page with the following content in the section.
- Back To Top Demo by Nitesh Luharuka
Description: Suppose we have to display large content on a page but we have a limited space on page. In this case we can wrap the content in HTML div and by setting its overflow-y to scroll we can add a vertical scrollbar to display all content in the specified div. This solution works fine but whenever a postback occurs on page the div gets back to its original starting position.
Here in this example, In order to maintain the scrolled position after postback I retained the div scroll value in hiddenfield using jquery and after postback get the scroll value from hiddenfield and set back to div to maintain the scroll position.
Implementation: Let’s create a sample page from demonstration purpose.
HTML Source Code
.divcss {
overflow-y: scroll;
height: 200px;
width: 300px;
}
$[document].ready[function[] {
maintainScrollPosition[];
}];
function pageLoad[] {
maintainScrollPosition[];
}
function setScrollPosition[scrollValue] {
$['#'].val[scrollValue];
}
function maintainScrollPosition[] {
$["
dvScroll"].scrollTop[$['#'].val[]];
}
Maintain scroll position of div on postback
1. This is a dummy text for demonstration
2. This is a dummy text for demonstration
3. This is a dummy text for demonstration
4. This is a dummy text for demonstration
5. This is a dummy text for demonstration
6. This is a dummy text for demonstration
7. This is a dummy text for demonstration
8. This is a dummy text for demonstration
9. This is a dummy text for demonstration
10. This is a dummy text for demonstratio
11. This is a dummy text for demonstration
12. This is a dummy text for demonstration
13. This is a dummy text for demonstration
14. This is a dummy text for demonstration
15. This is a dummy text for demonstration
16. This is a dummy text for demonstration
17. This is a dummy text for demonstration
18. This is a dummy text for demonstration
19. This is a dummy text for demonstration
20. This is a dummy text for demonstration
21. This is a dummy text for demonstration
22. This is a dummy text for demonstration
23. This is a dummy text for demonstration
24. This is a dummy text for demonstration
25. This is a dummy text for demonstration
26. This is a dummy text for demonstration
Now over to you:
A blog is nothing without reader's feedback and comments. So please provide your valuable feedback so that i can make this blog better and If you like my work; you can appreciate by leaving your comments, hitting Facebook like button, following on Google+, Twitter, Linkedin and Pinterest, stumbling my posts on stumble upon and subscribing for receiving free updates directly to your inbox . Stay tuned and stay connected for more technical updates.
How do I make a div scrollTo the top of the page?
In the click listener, we call div. scroll with an object with top set to 0 to scroll to the top. And behavior is set to 'smooth' to add smooth scrolling. Now when we click on the scroll to top button, the scrollable div should go back to the top with a smooth scrolling motion during scrolling.
How do I find the scroll position of a div?
First, select the element using the selecting methods such as querySelector[] . Second, access the scroll position of the element via the scrollLeft and scrollTop properties.
How do I find out when a user scrolls to the top of a div?
$['
color-list']. on['scroll', function[] {.
var scrollTop = $[this]. scrollTop[];.
if [scrollTop + $[this]. innerHeight[] >= this. scrollHeight] {.
$['
message']. text['end reached'];.
} else if [scrollTop = element. scrollHeight to detect scroll end.
Chủ Đề