Skip to content
Fix Code Error

jQuery scroll to element

March 13, 2021 by Code Error
Posted By: Anonymous

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.

Solution

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>
Answered By: Anonymous

Related Articles

  • Combining items using XSLT Transform
  • After a little scroll, the sticky navbar just is not…
  • How to represent arrays within ember-data models?
  • How to show title in hover - css / jquery
  • Animating Elements in One by One
  • Why are CSS keyframe animations broken in Vue…
  • Javascript text animation not triggering
  • Onclick, the button moves down, why can that due to?
  • Active tab issue on page load HTML
  • How to add mixin for height in mwc textfield?
  • Navbar not filling width of page when reduced to mobile view
  • Android Layout Animations from bottom to top and top…
  • Form field border-radius is not working only on the…
  • How to add 'load more' functionality to items on a…
  • Android : Fragment doesn't fit into Fragment Container
  • Convert array to nested JSON object - Angular Material tree
  • When I use '/js/app.js' on my Laravel view my…
  • JavaScript Code not running on a Live Sever nor Local Host
  • Display Grid does not work in Polymer correctly
  • How to Fix hover not working after JS script…
  • How do I keep only the first map and when the game…
  • Adobe XD to responsive html
  • Is CSS Turing complete?
  • Centering in CSS Grid
  • Vue.js input values not updating after data is modified
  • How to use html template with vue.js
  • Having trouble with my nav bar/header, It used to…
  • How can I center all my contents in html?
  • Fix top buttons on scroll of list below
  • Polymer Neon-Animation: How to use…
  • How to loop through all the buttons to a click event…
  • Javascript and css animation
  • Adding animation to QPushbutton enterEvent and exitEvent
  • Do not close the mode in the mouse up event
  • How to hide header elements if…
  • Calculator: Back key doesnt work in Javascript
  • How do you create a custom neon animation in Dart
  • Reset/remove CSS styles for element only
  • Polymer - Ripple Animation Skews Hero Animation
  • polymer paper-scroll-header-panel doesn't display
  • Get all input values from dynamic form in Vuejs
  • Set the maximum character length of a UITextField in Swift
  • How to change the active tab in a responsive…
  • Latest jQuery version on Google's CDN
  • How to format a phone number in a textfield
  • How to make vuetify navigation drawer to close group…
  • Open a column of buttons when another button is…
  • How to properly update the library parts
  • in doesn't call method on item change
  • Vaadin Spring Boot - There was an exception while…
  • Show/hide 'div' using JavaScript
  • Show div on scrollDown after 800px
  • Docker compose fails to start a service with an…
  • does not work with ?
  • Polymer neon-animations example not animating
  • Dart core element core-collapse
  • Maven2: Missing artifact but jars are in place
  • Observing a controller attribute in the view and react to it
  • jQuery.on() Delegation: Slightly complex selector…
  • How do I tell Maven to use the latest version of a…
  • Animate a UIBezierPath hexagon like UIActivityIndicatorview
  • Set keyboard caret position in html textbox
  • paper-dialog stretching off screen
  • Using :focus to style outer div?
  • How to specify line breaks in a multi-line flexbox layout?
  • Vuetify v-tabs v-tab-item overflows window width
  • Chrome / Safari not filling 100% height of flex parent
  • Is it possible to apply CSS to half of a character?
  • center 3 items on 2 lines
  • AppCompat v7 r21 returning error in values.xml?
  • Does bootstrap have builtin padding and margin classes?
  • Content showing over the top of tooltip
  • Azure Sql : Unable to Replace HTML String
  • How do I get neon-animation to work in Polymer Dart 1.0
  • Using Ember.js text field ids for a tag
  • Pygame enemy not staying at the intended position on the map
  • Second animation with @keywords does not apply to div
  • CSS3 Rotate Animation
  • vue enter transition not working properly
  • Update subviews from Ember.View
  • Disable pasting text into HTML form
  • How to aggregate values from a list and display in…
  • How to change the color of paper-scroll-header-panel?
  • What is causing this broken animation/transition in…
  • Smart way to truncate long strings
  • Valid values for android:fontFamily and what they map to?
  • Why does git perform fast-forward merges by default?
  • When tab is selected, show next tab.. if last tab…
  • paper-icon-button doesn't show the icon when located…
  • Onclick event not happening when slick slider is…
  • Max length UITextField
  • Polymer paper-dropdown-menu not rendered correctly…
  • Stop multiple clicks vue.js
  • Polymer 1.x: Two-way databinding for paper-dropdown-menu
  • Rails wrong number of arguments error when…
  • Vue Transition not Triggering on button click
  • jQuery Mobile: document ready vs. page events
  • sidebar background is not going full to the bottom
  • Polymer v1.0 iron-list distance calculation as each…
  • Spring Boot - Cannot determine embedded database…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How can I determine if a variable is ‘undefined’ or ‘null’?

Next Post:

How can I check for “undefined” in JavaScript?

Leave a Reply Cancel reply

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

.net ajax android angular arrays aurelia backbone.js bash c++ css dataframe ember-data ember.js excel git html ios java javascript jquery json laravel linux list mysql next.js node.js pandas php polymer polymer-1.0 python python-3.x r reactjs regex sql sql-server string svelte typescript vue-component vue.js vuejs2 vuetify.js

  • you shouldn’t need to use z-index
  • No column in target database, but getting “The schema update is terminating because data loss might occur”
  • Angular – expected call-signature: ‘changePassword’ to have a typedeftslint(typedef)
  • trying to implement NativeAdFactory imports deprecated method by default in flutter java project
  • What should I use to get an attribute out of my foreign table in Laravel?
© 2022 Fix Code Error