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

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

本文关键字：另一部 一部分 何使用 JavaScript 导航      更新时间：2023-09-26
<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） 时让网页滚动到 #searchResultdiv 标记。是否可以使用 Javascript 创建此操作？

如果你不使用jQuery，你可以使用普通的javascript： 

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

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

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

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

这里的"#target 示例"是您需要在该页面中进入的部分。

在您的示例中，使用如下所示的调用

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

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

在您的情况下：

document.location += "#searchResult";
相关文章：