I'm trying to scroll the page based on the hash on the url. Here's my code:

我尝试基于url上的散列来滚动页面。这是我的代码:

var hash = window.location.hash;
$(hash).scrollTop();

This doesn't to anything. So what am I doing wrong? And another thing, I need something like this:

这并不是什么。我做错了什么?还有一件事，我需要这样的东西:

$(hash).scrollTop($("#header").height());

Is that possible?..is my div(the element hash is pointed to) going to scroll to the top, upto the bottom of the "#header"?..

这有可能吗?。我的div(元素散列被指向)是否会滚动到顶部，向上滚动到“#header”的底部?

Update 1

The hash text is an id so it returns the text "#myid" from window.location.hash. One other thing, the div of the header has a position:fixed on its css while the container where the div(the hash is id'd to) has a position:absolute so it is scrolling under the #header that's why I need it to scroll to the bottom of the header or the height.

散列文本是一个id，因此它从窗口返回文本“#myid”。另一件事，报头的div有一个位置:固定在css上，而div(这个散列是id)的容器有一个位置:绝对，所以它在#报头下滚动，这就是为什么我需要它滚动到报头的底部或高度。

Update 2

I'm now trying to use the scrollIntoView() plugin but having the error.

我现在正在尝试使用scrollIntoView()插件，但是出现了错误。

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)
Timestamp: Mon, 17 Oct 2011 03:23:18 UTC


Message: Object doesn't support this property or method
Line: 71
Char: 5
Code: 0
URI: http://localhost:3000/javascripts/jquery.scrollIntoView.js


Message: Object doesn't support this property or method
Line: 34
Char: 5
Code: 0
URI: http://localhost:3000/surveys/%E6%83%85%E5%A0%B1%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3%E3%83%BB%E5%80%8B%E4%BA%BA%E6%83%85%E5%A0%B1%E4%BF%9D%E8%AD%B7%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%82%B7%E3%83%BC%E3%83%88%EF%BC%88%E8%87%AA%E5%B7%B1%E7%82%B9%E6%A4%9C%EF%BC%89-%E7%89%88-1-0/C9uKCqXNn2/take?section=17

My code is: $("#survey_section_8").scrollIntoView();

我的代码是:$(" # survey_section_8 ").scrollIntoView();

what am I doing wrong here?..

我在这里做错了什么?

Hope that I was clear in my questions. Thank you!

希望我的问题是清楚的。谢谢你！

3 个解决方案

#1

You need something more like this to scroll to the specified anchor:

您需要类似这样的东西来滚动到指定的锚点:

var y = $('a[name=' + window.location.hash + ']').offset().top;
$("html, body").scrollTop(y);

Note that you'll need some text within that <a> (e.g. just a space) to be able to get the offset.

注意，您需要在(例如，只是空格)中包含一些文本才能获得偏移量。

#2

$(window.location.hash) isn't going to do you much, because that's just a string. jQuery needs more instruction to find the element you're looking for.

$(window.location.hash)对您的帮助不大，因为它只是一个字符串。jQuery需要更多的指令来找到要查找的元素。

Is the hash text the id or class or name of an element on the page? You're probably going to need to prefix it with a "." or a "#" or in combination with some other selector in order for jQuery to find the anchor element that generated the hash.

散列文本是页面上元素的id或类或名称吗?您可能需要在它前面加上“.”或“#”，或者与其他选择器结合，以便jQuery找到生成散列的锚元素。

Secondly, calling .scrollTop() without any parameters returns the scroll-top position; it doesn't scroll to the top. Passing a parameter to it sets the vertical scroll position for the element it was called on. @N Rohler's answer is much closer to a working example than I could have come up with off the top of my head. It should be a good start for you.

其次，调用.scrollTop()没有任何参数返回scrolltop位置;它不会滚动到顶部。向它传递一个参数，设置它所调用的元素的垂直滚动位置。@N Rohler的答案更接近于一个工作的例子，而不是我能想到的。这对你来说应该是个不错的开始。

#3

I ended up using this plugin jQuery.ScrollTo(). But still I can't get rid off that error. So I tried putting my code inside the javascript of the plugin. Eureka! it worked! I think the error is caused by the other jquery inside the page. This is what I have inserted in the javascript:

我最后使用了这个插件jQuery.ScrollTo()。但是我还是不能摆脱这个错误。所以我尝试把代码放到插件的javascript中。尤里卡!它工作!我认为这个错误是由页面内的另一个jquery引起的。这就是我在javascript中插入的内容:

jQuery(function( $ ){
                //borrowed from jQuery easing plugin
                //http://gsgd.co.uk/sandbox/jquery.easing.php
                $.easing.elasout = function(x, t, b, c, d) {
                        var s=1.70158;var p=0;var a=c;
                        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
                        if (a < Math.abs(c)) { a=c; var s=p/4; }
                        else var s = p/(2*Math.PI) * Math.asin (c/a);
                        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
                };

                $(document).ready(function(){
                    $.scrollTo(window.location.hash, {speed:800, easing:'swing',axis:'y',offset:{top:-(parseInt($('#header').height()))}});
                });
            });

I know this isn't the best answer. But it did the job, so it's alright! I'll figure it out later on how to optimize it.

我知道这不是最好的答案。但它成功了，所以一切都很好!我稍后会讲到如何优化它。

#1