Have Geek Brain

How to scroll to show part of a webpage

In what ways can you control / scroll the scrollbar in a web browser using JavaScript other than anchors? - If you can't dynamically create bindings and tell the browser to scroll before.

+1


a source to share


5 answers


To scroll by arbitrary amount:

//Parameters being the amount by which to scroll in pixels (horizontal and vertical)
window.scrollBy(50, 50);

To go to a specific point:



 window.scrollTo(0, 30);

To read the current position:

 document.body.scrollLeft
 document.body.scrollTop
+1


a source


Here is one example of how you can control X / Y scrolling without anchors. (ScrollX / ScrollY)

The key part, I believe, is the following



function saveScrollCoordinates() { 
  document.Form1.scrollx.value = (document.all)?document.body.scrollLeft:window.pageXOffset; 
  document.Form1.scrolly.value = (document.all)?document.body.scrollTop:window.pageYOffset; 
}
+1


a source


Using a property (common to all elements), you can scroll to a specific pixel height. Thus, scrolling to the height of a particular anchor would require a request to offset that anchor and set accordingly. Just for the sake of illustration; this is how you can scroll the specified element using jQuery: scrollTop

scrollTop 

var top = $('div#something').offset().top;
$(document).scrollTop(top);

NOTE : jQuery implementation can be confusing; it accepts , but the top-most element with a property is , in fact, (usually refers to ). document

scrollTop

document.documentElement

<HTML>

There is also a property for horizontal scrolling. scrollLeft

And of course you can read these properties:

var currentScrollTop = document.documentElement.scrollTop;
+1


a source


The prototype implements a function scrollTo()

that makes it very easy to navigate to a specific element:

$("#elementID").scrollTo();

The implementation internally calls window.scrollTo

for the actual scrolling.

+1


a source 


var coord = {top:null,left:null,width:null,height:null};
        if (typeof window.pageYOffset == 'number') {
            coord.top = window.pageYOffset; coord.left = window.pageXOffset;            
        } else if (document.body && (document.body.scrollLeft || document.body.scrollTop)) {
            coord.top = document.body.scrollTop; coord.left = document.body.scrollLeft;
        } else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
            coord.top = document.documentElement.scrollTop; coord.left = document.documentElement.scrollLeft;
        }

        if (typeof window.innerWidth == 'number') {
            coord.width = window.innerWidth; coord.height = window.innerHeight;
        } else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
            coord.width = document.documentElement.clientWidth; coord.height = document.documentElement.clienthHeight; 
        } else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
            coord.width = document.body.clientWidth;
            coord.height = document.body.clientHeight;
        }
+1


a source






More articles:


All Articles