how to navigate to another section of the page using javascript?

Question

<div class = "searchMobile  originalSearchBar">
    <form class = "mobileForm" action="#" onsubmit="return false;">
        <div id="searchExpandTrigger"></div>
        <button type="submit" id="clearSearchMobile" onclick="clearSearch('mobile')"><img src = "img/icon/searchClose.png"/></button>
        <input class="originalInput" type="search" name="search" id="keywordMobile" onkeypress="searchKeyPressMobile(event)" style = "margin-left:25px">
        <button type="submit" id="btnSearchMobile" class="originalButtonPosition" onclick="submitMobile(keywordMobile.value)" /><img src="img/icon/searchIcon.png"/></button>
    </form>
</div>

<div id= "searchResult"></div>

What i want is to let the webpage scroll to the #searchResult div tag when the user clicks the submit button (#btnSearchMobile). Is it possible to create this action using Javascript?

Answer 1

In case you're not using jQuery, you can go with plain vanilla javascript:

window.scrollTo(0, document.getElementById('searchResult').offsetTop)

Answer 2

You can use the JQuery scrollTo plugin : https://github.com/flesler/jquery.scrollTo

Demo : http://flesler.com/jquery/scrollTo/

Answer 3

 $.scrollTo( '#target-examples', 800, {easing:'elasout'});

here '#target-examples' is the section you need to go in that page.

In your example use calling as below

$("#btnSearchMobile").click(function(){
 $.scrollTo( ' #searchResult', 800, {easing:'elasout'});
});

Answer 4

You can us the id of the search div and append it to the url.

In your case:

document.location += "#searchResult";