CODEWITHSUNDEEP
javascript
user2625152
user2625152

Reputation: 517

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

<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?

Upvotes: 2

Views: 4225

Answers (4)

ilpaijin
ilpaijin

Reputation: 3695

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

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

Upvotes: 3

Jan
Jan

Reputation: 556

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

In your case:

document.location += "#searchResult";

Upvotes: 0

Haji
Haji

Reputation: 2087

 $.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'});
});

Upvotes: 0

basarat
basarat

Reputation: 276293

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

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

Upvotes: 0

Related Questions