How to Smooth scroll to div id jQuery?

0 votes

I've been trying to get a scroll to div id jquery code to work correctly.

This is my code:

$('#myButton').click(function() {
   $.scrollTo($('#myDiv'), 1000);
});

But it didn't work. It just snaps to the div. I also tried

$('#myButton').click(function(event) {
     event.preventDefault();
   $.scrollTo($('#myDiv'), 1000);
});

With no progress.

Oct 4 in JQuery by kartik
• 36,020 points
186 views

1 answer to this question.

0 votes

Hello @kartik,

You need to animate the html, body

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#myDiv").offset().top
    }, 2000);
});

Hope it helps!!
Thank you!!

answered Oct 4 by Niroj
• 78,480 points

Related Questions In JQuery

0 votes
1 answer

How to convert form data to JavaScript object with jQuery?

Hello @kartik, You can use: function form_to_json (selector) { ...READ MORE

answered Apr 28 in JQuery by Niroj
• 78,480 points
292 views
0 votes
1 answer

How to check if a jQuery plugin is loaded?

Hello @kartik, for the plugins that doesn't use ...READ MORE

answered Apr 28 in JQuery by Niroj
• 78,480 points
178 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28 in JQuery by Niroj
• 78,480 points
3,855 views
0 votes
1 answer

How to remove close button on the jQuery UI dialog?

Hii, I found this worked for me in the end ...READ MORE

answered May 12 in JQuery by Niroj
• 78,480 points
598 views
+1 vote
1 answer

How to make anchor tag with routing using Laravel?

Hey @kartik, First you have to go to ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,480 points
3,527 views
0 votes
1 answer

What is redirection in Laravel?

Named route is used to give specific ...READ MORE

answered Mar 18 in Laravel by Niroj
• 78,480 points
421 views
0 votes
1 answer

How to install Laravel via composer?

Hello, This is simple you just need to ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,480 points
292 views
+1 vote
1 answer

What are named routes in Laravel and How can specify route names for controller actions?

Hey @kartik, Named routing is another amazing feature of ...READ MORE

answered Mar 23 in Laravel by Niroj
• 78,480 points
4,230 views
0 votes
1 answer

How to scroll to element from bottom to top with a nice animation using Jquery?

Hello @kartik, Assuming you have a button with ...READ MORE

answered Sep 10 in JQuery by Niroj
• 78,480 points
261 views
0 votes
1 answer

How to import jQuery UI using ES6/ES7 syntax?

Hii, Add a alias in webpack config: resolve: { ...READ MORE

answered Apr 28 in JQuery by Niroj
• 78,480 points
1,438 views