Question

我想让jQuery直接导航（无动画需要）到我传入变量的id。

我有id="content"，id="edit"，id="..."等<h2>个标题的各种标记。使用PHP进行验证我将输出类似var NAVIGATE_TO = <?php echo $where_failed;?>的变量，我想将网站移至id位置。

就像我使用domain.tld/page#edit或#content但使用jQuery一样，因为当我加载页面时，我的PHP框架不允许我指示哈希。

Answer 1

您可以将location.hash设置为您需要浏览器滚动到的id：

window.location.hash = '#edit';

Answer 2

根据我的经验，window.location.hash解决方案仅适用一次。如果您不想使用该插件，可以试试这个：

var navigationFn = {
    goToSection: function(id) {
        $('html, body').animate({
            scrollTop: $(id).offset().top
        }, 0);
    }
}

然后像这样调用它（其中someID是您要滚动到的元素的ID）：

navigationFn.goToSection('#someID');

使用此功能，您还可以改变动画速度（我将其设置为0），以便它是即时的，但您可以将值传递给函数，以便代码可以重复使用。

Answer 3

使用jquery scrollto插件然后你就可以这样做

$(document).ready(function(){  
      $(".topMenu").click(function() {
        $.scrollTo($("#edit"), { duration: 0});
      });

Answer 4

我知道这是一个老问题，但是我想如果只希望该元素在浏览器视图中可见，那也是一个很好的解决方案。（滚动时没有任何动画）。

var elem = document.getElementById("yourContent");
elem.scrollIntoView();

以上示例摘自https://www.w3schools.com/jsref/met_element_scrollintoview.asp

我怎么能让jQuery直接转到<h2 id =“id-name”>？</h2>

4 个答案: