Question

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

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"?..

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.

Update 2

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

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();

what am I doing wrong here?..

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

Answer 1

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(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.