我正在尝试根据网址上的哈希滚动页面。这是我的代码:
var hash = window.location.hash;
$(hash).scrollTop();
这对任何事情都没有。那么我做错了什么? 还有一件事,我需要这样的事情:
$(hash).scrollTop($("#header").height());
这可能吗?..是我的div(指向的元素哈希)要滚动到顶部,直到"#header"
的底部?..
哈希文本是一个id,因此它从window.location.hash
返回文本“#myid”。另一件事,标题的div在其css上有position:fixed
,而div(哈希是id)的容器有position:absolute
所以它在{{1}下滚动这就是为什么我需要它滚动到标题的底部或高度。
我现在正在尝试使用scrollIntoView() plugin但是有错误。
#header
我的代码是: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
我在这里做错了什么?..
希望我的问题清楚。谢谢!
答案 0 :(得分:4)
你需要更像这样的东西来滚动到指定的锚点:
var y = $('a[name=' + window.location.hash + ']').offset().top;
$("html, body").scrollTop(y);
请注意,您需要<a>
内的某些文字(例如只是空格)才能获得offset
。
答案 1 :(得分:0)
$(window.location.hash)
不会对你有多大帮助,因为那只是一个字符串。 jQuery需要更多指令来查找您正在寻找的元素。
哈希文本是页面上元素的id或类或名称吗?您可能需要在其前面加上“。”或“#”或与其他选择器组合,以便jQuery找到生成哈希的锚元素。
其次,在没有任何参数的情况下调用.scrollTop()
会返回滚动顶部位置;它不会滚动到顶部。将参数传递给它会为调用它的元素设置垂直滚动位置。 @N Rohler的回答更接近于一个工作的例子,而不是我能想到的。这应该是一个很好的开始。
答案 2 :(得分:0)
我最终使用this plugin 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()))}});
});
});
我知道这不是最好的答案。但它完成了这项工作,所以没关系!我稍后会详细说明如何优化它。