题 通过单击元素内的锚点或包含div id的任何位置,将元素滚动到页面顶部


我想将页面滚动到例如单击导航div ID内的任何链接时的导航div ID,或者(如果可能)单击包含导航链接的div ID本身的任何位置时的导航div ID。

我研究了这个,我最接近的是 jQuery - 如何在单击时将锚点滚动到页面顶部? 但是由于某些原因,当我在我的例子中尝试这样做时它似乎不起作用。我究竟做错了什么?

我是jQuery的新手,html和css是中等的(并且使用了div的内联样式,因为我不想为这个例子提供单独的css)。

当我从中加载html和脚本时 jQuery - 如何在单击时将锚点滚动到页面顶部? 在Aptana它也不滚动。即使div类之上的内容div工作,也有可以滚动到的空间。

我在相关的div中包含了两个小段落来解释我的意思。

很感谢任何形式的帮助。谢谢。

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
        $('#scroll_navigation ul li').click(function() {
             $('html,body').animate({scrollTop: $(this).offset().top}, 800);
        }); 
    </script>

<body>

<div id="logo" style="margin: 0 auto; height: 300px; width: 60%; border: 1px solid #000">Logo</div>

    <div id="scroll_navigation" style="margin: 0 auto; width: 40%; border: 4px solid #225599">

        <p>Scroll navigation to top of page</p>
        <p>Catch any clicks in "#scroll_navigation" to scroll the div id to the top of the page</p>


            <div id="navigation">

                <div class="container" style="margin: 0 auto; height: 220px; width: 60%; border: 1px solid #000">

                    <ul>
                        <p>Catch clicks on anchors to scroll the div id to the top of the page</p>
                        <li><a href="#Portfolio" title="">Portfolio</a></li>
                        <li><a href="#Services" title="">Services</a></li>
                        <li><a href="#About" title="">About</a></li>
                        <li><a href="#Contact" title="">Contact</a></li>
                    </ul>

                </div>

            </div>

    </div>

<div id="content" style="margin: 0 auto; height: 1500px; width: 60%; border: 1px solid #000">Content</div>

</body>

编辑 在Firefox中使用scrollTop时要小心这一点。 Animate scrollTop无法在Firefox中运行 jQuery scrollTop - 不支持Mozilla / Firefox中的负值 花了一些时间来弄清楚我的代码很好但是在FF中scrollTop是这个问题。在同一个例子中,也可以观察到这种行为。向下滚动并固定锚点时,FF将向上滚动到目标div之前或之后2-4px的随机位置。

我现在使用Scrolld.js实现像素完美滚动到主要浏览器的所需点。我不明白不同的浏览器引擎如何从不同的(html或body)输入中呈现如scrollTop这样常见的东西据我所知并且我是jQuery的新手。猜猜这不是jQuery的“错误”,而是浏览器引擎如何呈现scrollTop。


17
2017-10-13 23:36


起源




答案:


我不知道你是否这样做,但你必须包括jquery才能使用它。 另一件事是,你的“点击监听器”必须在jqueries文档就绪函数中,如下所示:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>

$(document).ready(function(){
    $('#scroll_navigation ul li').on('click', function(){
        $('html,body').animate({scrollTop: $(this).offset().top}, 800);
    }); 
});  

</script>

34
2017-10-13 23:55



有用!非常感谢你!只想要我想要的。是的,我确实包含了jQuery,但不知道我必须在文档就绪函数中使用它。 - moderntimes
你是男人兄弟,不要让任何人告诉你。 - dps