2076
580
I have this input element:
<input type="text" class="textfield" value="" id="subject" name="subject">
Then I have some other elements, like other text inputs, textareas, etc.
When the user clicks on that input with #subject, the page should scroll to the last element of the page with a nice animation. It should be a scroll to bottom and not to top.
The last item of the page is a submit button with #submit:
<input type="submit" class="submit" id="submit" name="submit" value="Ok, Done.">
The animation should not be too fast and should be fluid.
I am running the latest jQuery version. I prefer to not install any plugin but to use the default jQuery features to achieve this.
9441613
asked Jul 13 '11 at 9:49
18.6k2881100
-
developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView – Christophe Roussy Dec 9 '18 at 13:25
28 Answers
3739
Assuming you have a button with the id button, try this example:
$("#button").click(function() { $([document.documentElement, document.body]).animate({ scrollTop: $("#elementtoScrollToID").offset().top }, 2000); });
I got the code from the article Smoothly scroll to an element without a jQuery plugin. And I have tested it on the example below.
<html> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script> $(document).ready(function (){ $("#click").click(function (){ $('html, body').animate({ scrollTop: $("#div1").offset().top }, 2000); }); }); </script> <div id="div1" style="height: 1000px; width 100px"> Test </div> <br/> <div id="div2" style="height: 1000px; width 100px"> Test 2 </div> <button id="click">Click me</button> </html>
Run code snippet
7,350144397
answered Jul 13 '11 at 9:52
42k42637
-
21
This will not work in all cases. See stackoverflow.com/questions/2905867/… – Jānis Elmeris Apr 25 '12 at 14:43
-
6
@BarryChapman not exactly. After googling I've found this, so both tags are needed if you don't want to have extra logic per browser type. – s3m3n May 10 '13 at 0:01
-
69
If you don't want animation, and instead want to jump instantly to the element, use .scrollTop(…) instead of .animate({scrollTop: …}, …). – Rory O'Kane Sep 20 '13 at 19:53
-
9
In addition to you're solution (which works great), you can add an on complete function that adds the hashtag to the url. In this case it won't scroll, because the scrollTo already scrolled to the right position, and if a user copies the URL it will automatically snap to the right place on the page. – Sander Jan 23 '14 at 8:09
-
7
if you use a callback to run when the animation is complete and notice the callback fires twice with this solution, try using "$('html body').animate(..." instead of "$('html, body').animate(..." the comma created two animate events. one for html, one for body. you really just want one for the html body Thanks @T.J. Crowder stackoverflow.com/questions/8790752/… – BoatCode Mar 20 '15 at 16:17
'WEB > jQuery' 카테고리의 다른 글
| jQuery 에서 다룰 수 있는 Element 요소에 대한 고찰 (0) | 2019.07.10 |
|---|---|
| jQuery HTML tag change (0) | 2019.07.05 |
| jQuery API 정복 - 자식 요소들 찾기, children() (0) | 2018.05.21 |
| 특정 div 프린트 하기 (0) | 2018.05.11 |
| Returning JSON data using jQuery POST function from server (0) | 2018.05.10 |
