jQuery scrollTop滚动问题 [英] jQuery scrolling issues with scrollTop

问题描述

我在滚动时遇到2个问题，我认为在一个帖子中问两个问题会更容易.

I am having 2 issues with scrolling, i figured it would just be easier to ask them both in one post.

在我问之前，下面是我的jQuery代码出现问题.

Before I ask, below is my jQuery code im having issues with.

$("a").click(function() {
    if(this.hash){
        $("#main").animate({
            scrollTop : $("h3[name="+this.hash.substr(1)+"]").position().top - 120
        },2000,"easeOutExpo");
    }
});

情况:我在页面上所进行的基本上是我有一个带有几个列表的侧边菜单.每个列表中的每个项目都链接到我的主要div部分或内容"部分中的锚点.单击列表项后，上面的代码运行，并且滚动到锚点之一.

Situation: What I have going on in my page is basically i have a side menu with a couple lists. Each item in each list links to a anchor in my main div section, or my 'content' section. When a list item is clicked, the code above runs and it scrolls to one of the anchors.

问题1:当我单击列表中的一个项目时，它向下滚动到一个锚点，效果很好.但是当再次单击同一项目时，主区域将滚动回到div的顶部.我想解决此问题的方法是检查div的当前滚动到"位置，然后如果自第一次单击以来位置未更改，则不允许代码再次运行，但我无法使其正常工作.有关如何解决此问题的任何建议?

Issue 1: When i click on a item in one of the lists, it scrolls down to a anchor which works just fine. But when that same item is clicked again, the main area scrolls back up to the top of the div. My thought to fix this was to check the current 'scrolled to' location of the div, and then not allow the code to run again if the location hadn't changed since the first click but i couldn't get that to work. Any suggestions on how to fix this issue?

问题2:再次如上所述，当我单击列表中的项目时，它会向下滚动到锚点.然后，我希望能够单击另一个列表项，并将其滚动到该位置.问题是，当我单击其他列表项时，它会滚动到主div中的某个随机位置，这些位置我甚至还没有锚定.谁能解释我如何做到这一点，以便我可以在锚点之间滚动?

Issue 2: Again as stated above, when i click on a item in a list it scrolls down to a anchor. What i then want to be able to to is click on a different list item and have it scroll to that position. The problem is when i click on a different list item, it scrolls to some random position in the main div, positions i haven't even anchored yet. Can anyone explain how I can make it so i can scroll from anchor to anchor?

注意:请在您的解释上方添加问题1或问题2，以使您知道所指的是哪一个.谢谢

Note: Please respond by having issue 1 or issue 2 above your explanation so i know which one your referring to. Thanks

编辑:由于Roko的帮助，我得以正常运行.对于将来的观看者来说，这是一个正在运行的演示的小提琴: http://jsfiddle.net/TsUcc/3/以下是最终的jquery代码的样子

Thanks to Roko's help i got it working. For future viewers here is the fiddle of a working demo: http://jsfiddle.net/TsUcc/3/ and below is what the finally jquery code looks like

$("a").click(function( e ) {
    e.preventDefault();

    if(this.hash){

        var target = '#'+ this.hash.substr(1);
        var destination = $(target).offset().top - 10;

        $('#main').stop().animate({
            scrollTop : '+=' + destination
        }, 1000);
    }
});

推荐答案

实时演示 >

问题1:

您可能使用了类似的内容:<a href="#goto">goto</a>，并且您没有阻止浏览器的默认行为，这只是通过将事件传递给click处理程序来完成的，例如:

you probably use something like: <a href="#goto">goto</a> and you did not prevented the browser default behavior which is simply done by passing the event to the click handler like:

$("a").click(function( e ) {
     e.preventDefault();
     // .....
});

问题2

您正在使用的HTMLelement position只是元素相对于其定位父元素的被动位置. 这意味着元素即使位于页面底部也可以具有30的位置.
要解决该问题

The HTMLelement position you're using is just a passive position of an element relative to it's positioned parent element. which means that an element can have a position of ie: 30 even if it's at the bottom of your page.
To fix that use

offset().top

_{也值得一读: https://developer .mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect}

问题3

H3元素不应该具有name属性.
为此目的使用ID.
为什么?
如果您的网站不错，并且页面底部有一些性感的东西，我可以通过引用您的网页和ID链接中的链接来发送链接给我的朋友，例如:

H3 elements are not supposed to have a name attribute.
Use an ID for that purpose.
Why?
if you have a nice web and you have some sexy stuff at the bottom of your page, I can send a link to my friend by referencing your web page and the ID in a link like:

example.com#bottomLady

example.com#bottomLady

他将立即得到我的想法，而无需一直向下滚动页面.

and he'll get immediately my thoughts without the need to scroll your page all the way down.

这篇关于jQuery scrollTop滚动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！