Javascript DOM HTML Element scrollLeft Property scroll body and html

Introduction

Scroll the contents of <body> by 30 pixels horizontally and 10 pixels vertically:

Click the button to scroll the contents of body.

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
body {//w w  w.j a va  2  s .c  o m
  height: 2000px;
  width: 2000px;
}

button {
  position: fixed;
}
</style>
</head>
<body>
<button onclick="myFunction()">Scroll contents of body</button><br><br>

<script>
function myFunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; 
  // Chrome, Firefox, IE and Opera places the overflow at the html level
  body.scrollLeft += 30;
  body.scrollTop += 10;
  html.scrollLeft += 30;
  html.scrollTop += 10;
}
</script>

</body>
</html>



PreviousNext

Related