CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
user5814955
user5814955

Reputation:

How can I scroll to an element using jQuery?

I want the page to scroll to a div that's at the top of the page. I have buttons for other parts of the page, but this isn't working when I scroll to the bottom and click on the button. It doesn't go to the top of the page.

Here is the CodePen: https://codepen.io/Filizof/pen/xygWyp?editors=1010

$(document).ready(function() {
    $("#btn1").click(function() {
        $("body").scrollTo("#menudiv");
    });
});

Upvotes: 12

Views: 68292

Answers (6)

MWD
MWD

Reputation: 1642

Vanilla JavaScript

If you would like to scroll to an element smoothly with "pure JavaScript" you could do something like this:

document.querySelector('#menudiv').scrollIntoView({
    behavior: 'smooth'
});

More information is here: Element.scrollIntoView()

NOTE: Please see Can I use... Support tables for HTML5, CSS3, etc. for the latest browser support...

jQuery

If you would like to scroll to an element smoothly using jQuery then you could do something like:

$(document).ready(function() {
  $(".btns").click(function() {
    $("html").animate(
      {
        scrollTop: $("#menudiv").offset().top
      },
      800 //speed
    );
  });
});

Example: https://jsbin.com/xaciloteqe/1/edit?html,js,output

This might be helpful for people researching this topic:

“Cancelable” Smooth Scrolling

Upvotes: 50

Qammar Feroz
Qammar Feroz

Reputation: 718

I update your code a little bit, it should be:

 $(document).ready(function() {
  $("#btn1").click(function()
 {
   var elmnt = document.getElementById("menudiv");
   elmnt.scrollIntoView();
 });
});

To scroll to a div/element, it is the scrollIntoView HTML DOM method. It is not a jQuery function.

Here is the code pen: JS Scroll to an Element

Upvotes: 0

itay zohar
itay zohar

Reputation: 187

JavaScript has the element.scrollIntoView() function.

Something like:

$("#menudiv")[0].scrollIntoView()

Upvotes: 9

JasParkety
JasParkety

Reputation: 151

I had a little problem due to some markdownify plugin, anyway I had to search for the link's target so I used this work around. Its actually working for a variety of element selectors, in my case my link was <a href="#target">some text</a> and my actual target was <a href="target"></a> for this particular case I can give you that solution:

var scrollAnchorSamePage = function() {
    $('a[href^="#"]').click(function() {
      event.preventDefault();
      var id  = $(this).attr("href");

      // okay lets remove the hashtag in front:
      var target = $('a[href^="' + id.substring(1, id.length) + '"]');

      // and I need a little offset due to a fixed sticky header by 140
      $('html, body').animate({ scrollTop: target.offset().top - (160)  }, 1000);
    });
}

scrollAnchorSamePage();

PS: I use following imports of jQuery packages, you can add them right before your closing </body> html tag in your DOM.

<!-- Latest minified jQuery -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Upvotes: 0

Shireesha Parampalli
Shireesha Parampalli

Reputation: 324

You can use simple JS to get this done. scrollIntoView() scrolls to visible area.

Something like this: 

var elmnt = document.getElementById("content");
elmnt.scrollIntoView();

Upvotes: 3

Chnkz
Chnkz

Reputation: 47

<script type="text/javascript" src="jquery-3.2.1.js">

replace with

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>

Upvotes: 0

Related Questions