How to scroll to specific element using jQuery in hindi
Post Views : 183

Leave a Comment / By
How to scroll to specific element using jQuery in hindi

Introduction

हेलो दोस्तों आज हम इस पोस्ट में jquery का इस्तेमाल करके sidebar menu पे click करके page को specific ID element तक scroll कराएँगे!. website में कई बार ऐसी functionality setup करनी पड़ जाती है जिसमे हम button, heading और lists menu पर click करे और automatically उस specific element तक scroll होजाये तो इस scroll functionality को setup करने के लिए हम $(‘html, body’).animate() और $(“selector”).scrollIntoView() इन दो method का इस्तेमाल करेंगे!.

HTML code

Example:

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>  
</head>
<body>

  <header id="main-header">
    <h1>Your Website</h1>
    <nav>
      <div class="menu-item">
        <a href="#">Home</a>
      </div>
      <div class="menu-item">
        <a href="#">About</a>
      </div>
      <div class="menu-item">
        <a href="#" class="mega-menu-trigger">Services</a>
        <div class="mega-menu">
          <div class="mega-menu-column">
            <h3>Column 1</h3>
            <ul>
              <li><a href="#">Service 1</a></li>
              <li><a href="#">Service 2</a></li>
              <li><a href="#">Service 3</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h3>Column 2</h3>
            <ul>
              <li><a href="#">Service 4</a></li>
              <li><a href="#">Service 5</a></li>
              <li><a href="#">Service 6</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h3>Column 3</h3>
            <ul>
              <li><a href="#">Service 7</a></li>
              <li><a href="#">Service 8</a></li>
              <li><a href="#">Service 9</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="menu-item">
        <a href="#">Contact</a>
      </div>
    </nav>
  </header>
  <div id="main-container">

   <!-- Sidebar -->
   <div id="sidebar">
    <ul>
      <li><a href="#section1" class="scroll-link">Section 1</a></li>
      <li><a href="#section2" class="scroll-link">Section 2</a></li>
      <li><a href="#section3" class="scroll-link">Section 3</a></li>
      <li><a href="#section4" class="scroll-link">Section 4</a></li>
      <li><a href="#section5" class="scroll-link">Section 5</a></li>
      <li><a href="#section6" class="scroll-link">Section 6</a></li>
      <li><a href="#section7" class="scroll-link">Section 7</a></li>
      <li><a href="#section8" class="scroll-link">Section 8</a></li>
      <li><a href="#section9" class="scroll-link">Section 9</a></li>
      <li><a href="#section10" class="scroll-link">Section 10</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div id="content">
    <div id="section1">
      <h2>Section 1</h2>
      <p>This is the content for Section 1.</p>
    </div>
    <div id="section2">
      <h2>Section 2</h2>
      <p>This is the content for Section 2.</p>
    </div>
    <div id="section3">
      <h2>Section 3</h2>
      <p>This is the content for Section 3.</p>
    </div>
    <div id="section4">
      <h2>Section 4</h2>
      <p>This is the content for Section 4.</p>
    </div>
    <div id="section5">
      <h2>Section 5</h2>
      <p>This is the content for Section 5.</p>
    </div>
    <div id="section6">
      <h2>Section 6</h2>
      <p>This is the content for Section 6.</p>
    </div>
    <div id="section7">
      <h2>Section 7</h2>
      <p>This is the content for Section 7.</p>
    </div>
    <div id="section8">
      <h2>Section 8</h2>
      <p>This is the content for Section 8.</p>
    </div>
    <div id="section9">
      <h2>Section 9</h2>
      <p>This is the content for Section 9.</p>
    </div>
    <div id="section10">
      <h2>Section 10</h2>
      <p>This is the content for Section 10.</p>
    </div>
  </div>
  </div>  
</body>

CSS

<style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sticky {
        position: fixed;
        width: 100%;
        top: 0;
    }
    nav {
      display: flex;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 10px;
      margin-right: 20px;
      font-weight: bold;
    }

    .mega-menu {
      display: none;
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
      background-color: #333;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      z-index: 1000;
    }

    .mega-menu-column {
      float: left;
      width: 33.33%;
      box-sizing: border-box;
      padding: 0 20px;
    }

    .mega-menu-column h3 {
      color: #fff;
    }

    .menu-item:hover .mega-menu {
      display: block;
    }
    #main-container {
      display: flex;
    }

    #sidebar {
      width: 200px;
      background-color: #444;
      color: #fff;
      padding: 20px;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    #content {
      flex-grow: 1;
      padding: 20px;
    }

    #sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #sidebar li {
      margin-bottom: 10px;
    }

    #sidebar a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
    }

    #sidebar a:hover {
      color: #ffcc00;
    }
    .sidebar-sticky{
        position: fixed;
        top: 25%;
    }
    #section1,
    #section2,
    #section3,
    #section4,
    #section5,
    #section6,
    #section7,
    #section8,
    #section9,
    #section10 {
      margin-bottom: 500px; /* Just for demonstration purposes to create enough scrollable space */
    }
    .sticky div#content {
    margin-top: 120px;
}
    /* Responsive styles */
    @media (max-width: 768px) {
      #main-container {
        flex-direction: column;
      }

      #sidebar {
        width: 100%;
      }
    }
</style>

jQuery $(‘html, body’).animate()

<script>
 $(document).ready(function () {
 // Scroll to the corresponding section when a sidebar item is clicked
  var header = $("header").innerHeight();
  $(".scroll-link").on("click", function(e) {
    e.preventDefault();
    var targetSection = $(this).attr("href");
            $('html, body').animate({
                scrollTop: $(targetSection).offset().top - header - 50
            }, 1000);
        });
 })
</script>

$(“selector”).scrollIntoView()

<script>
  $(document).ready(function () {
    // Scroll to the corresponding section when a sidebar item is clicked
        var header = $("header").innerHeight();
    $(".scroll-link").on("click", function(e) {
            e.preventDefault();
            var targetSection = $(this).attr("href");
            $(targetSection)[0].scrollIntoView({                
                 block: "center",
                 behavior: "smooth"
            });
        });
  });
</script>

Full source code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your Website</title>
  <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }

    header {
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .sticky {
        position: fixed;
        width: 100%;
        top: 0;
    }
    nav {
      display: flex;
    }

    nav a {
      color: #fff;
      text-decoration: none;
      padding: 10px;
      margin-right: 20px;
      font-weight: bold;
    }

    .mega-menu {
      display: none;
      position: absolute;
      top: 50px;
      left: 0;
      width: 100%;
      background-color: #333;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: 20px;
      z-index: 1000;
    }

    .mega-menu-column {
      float: left;
      width: 33.33%;
      box-sizing: border-box;
      padding: 0 20px;
    }

    .mega-menu-column h3 {
      color: #fff;
    }

    .menu-item:hover .mega-menu {
      display: block;
    }
    #main-container {
      display: flex;
    }

    #sidebar {
      width: 200px;
      background-color: #444;
      color: #fff;
      padding: 20px;
      box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    }

    #content {
      flex-grow: 1;
      padding: 20px;
    }

    #sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #sidebar li {
      margin-bottom: 10px;
    }

    #sidebar a {
      text-decoration: none;
      color: #fff;
      font-weight: bold;
    }

    #sidebar a:hover {
      color: #ffcc00;
    }
    .sidebar-sticky{
        position: fixed;
        top: 25%;
    }
    #section1,
    #section2,
    #section3,
    #section4,
    #section5,
    #section6,
    #section7,
    #section8,
    #section9,
    #section10 {
      margin-bottom: 500px; /* Just for demonstration purposes to create enough scrollable space */
    }
    .sticky div#content {
    margin-top: 120px;
}
    /* Responsive styles */
    @media (max-width: 768px) {
      #main-container {
        flex-direction: column;
      }

      #sidebar {
        width: 100%;
      }
    }
  </style>
</head>
<body>

  <header id="main-header">
    <h1>Your Website</h1>
    <nav>
      <div class="menu-item">
        <a href="#">Home</a>
      </div>
      <div class="menu-item">
        <a href="#">About</a>
      </div>
      <div class="menu-item">
        <a href="#" class="mega-menu-trigger">Services</a>
        <div class="mega-menu">
          <div class="mega-menu-column">
            <h3>Column 1</h3>
            <ul>
              <li><a href="#">Service 1</a></li>
              <li><a href="#">Service 2</a></li>
              <li><a href="#">Service 3</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h3>Column 2</h3>
            <ul>
              <li><a href="#">Service 4</a></li>
              <li><a href="#">Service 5</a></li>
              <li><a href="#">Service 6</a></li>
            </ul>
          </div>
          <div class="mega-menu-column">
            <h3>Column 3</h3>
            <ul>
              <li><a href="#">Service 7</a></li>
              <li><a href="#">Service 8</a></li>
              <li><a href="#">Service 9</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="menu-item">
        <a href="#">Contact</a>
      </div>
    </nav>
  </header>
  <div id="main-container">

   <!-- Sidebar -->
   <div id="sidebar">
    <ul>
      <li><a href="#section1" class="scroll-link">Section 1</a></li>
      <li><a href="#section2" class="scroll-link">Section 2</a></li>
      <li><a href="#section3" class="scroll-link">Section 3</a></li>
      <li><a href="#section4" class="scroll-link">Section 4</a></li>
      <li><a href="#section5" class="scroll-link">Section 5</a></li>
      <li><a href="#section6" class="scroll-link">Section 6</a></li>
      <li><a href="#section7" class="scroll-link">Section 7</a></li>
      <li><a href="#section8" class="scroll-link">Section 8</a></li>
      <li><a href="#section9" class="scroll-link">Section 9</a></li>
      <li><a href="#section10" class="scroll-link">Section 10</a></li>
    </ul>
  </div>

  <!-- Content -->
  <div id="content">
    <div id="section1">
      <h2>Section 1</h2>
      <p>This is the content for Section 1.</p>
    </div>
    <div id="section2">
      <h2>Section 2</h2>
      <p>This is the content for Section 2.</p>
    </div>
    <div id="section3">
      <h2>Section 3</h2>
      <p>This is the content for Section 3.</p>
    </div>
    <div id="section4">
      <h2>Section 4</h2>
      <p>This is the content for Section 4.</p>
    </div>
    <div id="section5">
      <h2>Section 5</h2>
      <p>This is the content for Section 5.</p>
    </div>
    <div id="section6">
      <h2>Section 6</h2>
      <p>This is the content for Section 6.</p>
    </div>
    <div id="section7">
      <h2>Section 7</h2>
      <p>This is the content for Section 7.</p>
    </div>
    <div id="section8">
      <h2>Section 8</h2>
      <p>This is the content for Section 8.</p>
    </div>
    <div id="section9">
      <h2>Section 9</h2>
      <p>This is the content for Section 9.</p>
    </div>
    <div id="section10">
      <h2>Section 10</h2>
      <p>This is the content for Section 10.</p>
    </div>
  </div>
  </div>  

  <script>
    $(document).ready(function () {
        var megaMenuTrigger = $('.mega-menu-trigger');

        megaMenuTrigger.on('mouseenter', function () {
            $(this).find('.mega-menu').css('display', 'block');
        });

        megaMenuTrigger.on('mouseleave', function () {
            $(this).find('.mega-menu').css('display', 'none');
        });

        $(window).scroll(function() {
            var scroll = $(window).scrollTop();
            // Add or remove class based on scroll position
            if (scroll > 25) {
                $("header").addClass('sticky');
                $("#sidebar ul").addClass('sidebar-sticky');
            } else {
                $("header").removeClass('sticky');
                $("#sidebar ul").removeClass('sidebar-sticky');
            }
        });

        // Scroll to the corresponding section when a sidebar item is clicked
        var header = $("header").innerHeight();

        $(".scroll-link").on("click", function(e) {
            e.preventDefault();
            var targetSection = $(this).attr("href");
            // $(targetSection)[0].scrollIntoView({                
            //     block: "center",
            //     behavior: "smooth"
            // });

            $('html, body').animate({
                scrollTop: $(targetSection).offset().top - header - 50
            }, 1000);
        });
    });
  </script>
</body>
</html>

 

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *