Question

我正在尝试设置链接，使用如下URL，可以在Django应用程序中直接跳转到页面加载时的相关div，例如。

mysite.mydomain /常见问题＃faq9-1

以下是其中一个常见问题解答的示例：

<div class="panel-group" id="faq-9">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#faq9-1">
                    9.1 FAQ Title here.
                </a>
            </h4>
        </div>
        <div id="faq9-1" class="panel-collapse collapse">
            <div class="panel-body">
                 Body of FAQ here.
            </div>
         </div>
    </div>

当然，只是加载相关的网址没有任何效果，将href="#faq9-1"和/或id="faq9-1"替换为name="faq9-1"并不会改变这一点。所以，我想也许有些jquery可以做到这一点：

<script type="application/javascript">
$(document).ready(function () {
    var faq = window.location.href.split('#')[1];
    if (faq) {
        console.log("Got FAQ: " + faq);
        if(faq.match(/^faq/)) {
            $('html, body').animate({
                scrollTop: $("#" + faq).offset().top
            }, 2000);
        }
    }
});
</script>

......但仍然没有。我甚至无法从控制台窗口触发跳转。我也试过这个插件：

https://github.com/flesler/jquery.scrollTo

...并且，从控制台尝试了上面的插件和方法。依然没有。据推测，我错过了一些明显的东西，所以我欢迎任何建议。

Answer 1

我看不到你的所有html，但如果你的页面没有滚动（如在页面上没有足够的信息需要滚动条）那么页面就不会跳转，因为有无处可跳。

你不应该需要jQuery来实现这一目标。您的代码是<a href="#faq9-1"></a>且div为<div id="faq9-1">

的代码是正确的

Answer 2

最终通过以下方式设法使其工作。首先，添加另一个ID参数：

<a data-toggle="collapse" data-parent="#accordion" href="#faq1-2" id="faq1_2">

修复了将相关部分移到顶部的问题，但是它需要一些javascript来移动从横幅下方查看的部分，并展开视图：

$(window).load(function () {
        if (window.location.hash) {
            var faq = window.location.href.split('#')[1];
            var tbody = faq.replace(/_/,'-');
            $('#' + tbody).addClass("in");
            window.scrollBy(0,-160);
        }

    });

Django直接跳到div

2 个答案: