3

我正在尝试根据 url 上的哈希滚动页面。这是我的代码：

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

这没什么。那么我做错了什么？还有一件事，我需要这样的东西：

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

这可能吗？..我的 div（指向元素哈希）是否会滚动到顶部，直到底部"#header"？

更新 1

散列文本是一个 id，因此它从 .返回文本“#myid” window.location.hash。另一件事，标题的 divposition:fixed在它的 css 上有一个，而 div（哈希是 id'd 到）的容器有一个position:absolute，所以它在下面滚动，#header这就是为什么我需要它滚动到标题的底部或高度。

更新 2

我现在正在尝试使用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

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

我在这里做错了什么？..

希望我的问题很清楚。谢谢！

4

3 回答 3

4

你需要更多类似的东西来滚动到指定的锚点：

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

请注意，您需要其中的一些文本<a>（例如，只是一个空格）才能获得offset.

于 2011-10-14T01:15:33.530 回答
0

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

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

其次，.scrollTop()不带任何参数调用返回滚动顶部位置；它不会滚动到顶部。将参数传递给它会设置调用它的元素的垂直滚动位置。@N Rohler 的回答比我想出的更接近一个工作示例。这对你来说应该是一个好的开始。

于 2011-10-14T01:18:56.793 回答
0

我最终使用了这个插件 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()))}});
                });
            });

我知道这不是最好的答案。但它完成了工作，所以没关系！稍后我会弄清楚如何优化它。

于 2011-10-18T09:00:55.753 回答