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>

我想要的是当用户点击提交按钮（#btnSearchMobile）时，让网页滚动到#searchResult div标签。是否可以使用Javascript创建此操作？

Answer 1

如果您不使用jQuery，可以使用普通的jilla：

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

Answer 2

您可以使用JQuery scrollTo插件：https://github.com/flesler/jquery.scrollTo

演示：http://flesler.com/jquery/scrollTo/

Answer 3

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

此处'#target-examples'是您需要在该页面中进行的部分。

在您的示例中，使用以下呼叫

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

Answer 4

您可以使用搜索div的ID并将其附加到网址。

在你的情况下：

document.location += "#searchResult";

如何使用javascript导航到页面的另一部分？

4 个答案: