Languages
[Edit]
EN

jQuery - how to scroll to element?

8 points
Created by:
JustMike
26120

1. Overview

Using jQuery it is possible to scroll to element placed on web page in following ways:

1.1. without animation

var element= $('my-element-css-selector');
var offset = element.offset();

var root = $('html');

root.scrollLeft(offset.left);
root.scrollTop(offset.top);

1.2. with animation  

var element= $('my-element-css-selector');
var offset = element.offset();

var config = {
    scrollLeft: offset.left,
    scrollTop: offset.top
};
      
var duration = 200; // in milliseconds
      
$('html').animate(config, duration);

Bellow full examples how to scroll web page has been presented.

2. scrollLeft and scrollTop methods full example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .article {
        margin: 10px 0;
        padding: 0 10px;
        border: 1px solid green;
        width: 1000px; height: 600px;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script>
    
    function scrollTo(selector) {
      var article = $(selector);
      var offset = article.offset();

      var root = $('html');

      /*
        // ALTERNATIVELY:
        
        var html = document.documentElement;
        var body = document.body;

        var root = $([html, body]).

        // or 

        var root = $('html, body')
      */

      root.scrollLeft(offset.left);
      root.scrollTop(offset.top);
    }
    
  </script>
</head>
<body>
  <div class="outline">
    <h2>Outline:</h2>
    <a href="javascript:scrollTo('.article-1')">Article 1</a><br />
    <a href="javascript:scrollTo('.article-2')">Article 2</a><br />
  </div>
  <div class="article article-1">
    <h3>Article 1</h3>
    <p>
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
    </p>
  </div>
    <div class="article article-2">
    <h3>Article 2</h3>
    <p>
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
    </p>
  </div>
</body>
</html>

3. animate method full example

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>

    .article {
        margin: 10px 0;
        padding: 0 10px;
        border: 1px solid green;
        width: 1000px; height: 600px;
    }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
  <script>
    
    function scrollTo(selector) {
        var article = $(selector);
        var offset = article.offset();

        var config = {
            scrollLeft: offset.left,
            scrollTop: offset.top
        };
      
        var duration = 200; // in millisecoonds
      
        $('html').animate(config, duration);
      
        /*
          // ALTERNATIVELY:

          var html = document.documentElement;
          var body = document.body;

          $([html, body]).animate(config, duration);

          // or 

          $('html, body').animate(config, duration);
        */
    }
    
  </script>
</head>
<body>
  <div class="outline">
    <h2>Outline:</h2>
    <a href="javascript:scrollTo('.article-1')">Article 1</a><br />
    <a href="javascript:scrollTo('.article-2')">Article 2</a><br />
  </div>
  <div class="article article-1">
    <h3>Article 1</h3>
    <p>
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
      This is article 1 text...<br />
    </p>
  </div>
    <div class="article article-2">
    <h3>Article 2</h3>
    <p>
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
      This is article 2 text...<br />
    </p>
  </div>
</body>
</html>

 

Native Advertising
50 000 ad impressions - 449$
🚀
Get your tech brand or product in front of software developers.
For more information contact us:
Red dot
Dirask - friendly IT community for everyone.

❤️💻 🙂

Join