forked from Codecademy/docs
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Term Entry] JavaScript Window Function: scrollBy()
* Created scrollBy markdown page. Added content relevant to scrollBy(). * Fixed syntax errors. Removed references to one and no parameters (Originally stated that method works with one or no parameters -- this is false. Mixed up two different methods in my head). General housekeeping. * Made request modifications. Added third example to show syntax of scrollBy(options). * Completed unfinished line on line 72 * Finished line on line 72 * Finished line on line 72 * Finished line on line 72 * minor fixes * Minor changes ---------
- Loading branch information
1 parent
921eabc
commit f5273c4
Showing
1 changed file
with
79 additions
and
0 deletions.
There are no files selected for viewing
79 changes: 79 additions & 0 deletions
79
content/javascript/concepts/window/terms/scrollBy/scrollBy.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
--- | ||
Title: 'scrollBy()' | ||
Description: 'Scrolls the window content by a specified number of pixels, relative to the current scroll position.' | ||
Subjects: | ||
- 'Computer Science' | ||
- 'Web Development' | ||
Tags: | ||
- 'Arguments' | ||
- 'Functions' | ||
- 'Parameters' | ||
CatalogContent: | ||
- 'introduction-to-javascript' | ||
- 'paths/front-end-engineer-career-path' | ||
--- | ||
|
||
In JavaScript, **`scrollBy()`** is a function provided by the browser's `window` object. It scrolls the window content up, down, left, or right based on the specified parameters. The scrolling occurs relative to the current scroll position, meaning if the user has already scrolled 100 pixels down and `scrollBy(0, 100)` is called, the new scroll position will be 200 pixels down the page. | ||
|
||
## Syntax | ||
|
||
```pseudo | ||
window.scrollBy(x-coordinate, y-coordinate); | ||
``` | ||
|
||
Or, alternatively: | ||
|
||
```pseudo | ||
window.scrollBy(options); | ||
``` | ||
|
||
- `x-coordinate`: The number of pixels to scroll horizontally. A positive number will scroll _right_ and a negative number will scroll _left_. | ||
- `y-coordinate`: The number of pixels to scroll vertically. A positive number will scroll _down_ and a negative number will scroll _up_. | ||
- `options`: An object that takes up to three properties: | ||
- `left`: The number of pixels to scroll horizontally. | ||
- `top`: The number of pixels to scroll vertically. | ||
- `behavior`: Determines the scrolling animation. This can either be `instant`, `smooth`, or `auto`. | ||
|
||
## Example 1 | ||
|
||
The following example uses the `scrollBy()` function to scroll the window down by _200_ pixels when a button is clicked: | ||
|
||
```js | ||
// Get the button element | ||
const scrollButton = document.getElementById('scrollButton'); | ||
|
||
// Scroll down by 200 pixels when the button is clicked | ||
scrollButton.addEventListener('click', function () { | ||
window.scrollBy(0, 200); | ||
}); | ||
``` | ||
|
||
## Example 2 | ||
|
||
The following example scrolls the window _100_ pixels to the left and _100_ pixels up using negative values: | ||
|
||
```js | ||
// Get the button element | ||
const scrollButton2 = document.getElementById('scrollButton2'); | ||
|
||
// Scroll left by 100 pixels and up by 100 pixels when the button is clicked | ||
scrollButton2.addEventListener('click', function () { | ||
window.scrollBy(-100, -100); | ||
}); | ||
``` | ||
|
||
## Example 3 | ||
|
||
The following example scrolls the window _200_ pixels to the right, _150_ pixels down, and uses smooth scrolling, implemented by the `options` parameter: | ||
|
||
```js | ||
// Get the button element | ||
const scrollButton3 = document.getElementById('scrollButton3'); | ||
|
||
// Smoothly scroll right by 200 pixels and down by 150 pixels when the button is clicked | ||
window.scrollBy({ | ||
top: 150, | ||
left: 200, | ||
behavior: 'smooth', | ||
}); | ||
``` |