3

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!

jovhenni19
  • 450
  • 2
  • 8
  • 24
  • Try This IE Scroll Not Working - http://stackoverflow.com/questions/6736849/scrolltop-not-working-in-ie/7804393#7804393 – Chetan Oct 18 '11 at 09:50
  • It's just like before. It is scrolling to the top most of the page, anyways may be I just don't give the correct values to it. xP Thanks for the link! – jovhenni19 Oct 19 '11 at 06:17
  • I'd just like to add: of course it doesn't work in IE8. nothing does. – MrJD Oct 20 '11 at 11:38
  • Why not use the non-JS scroll. For example: [#copyright](http://stackoverflow.com/questions/7762114/jquery-scrolltop-does-not-work-in-ie8#copyright) added to this url should jump to the copyright section of this page – fncomp Oct 21 '11 at 17:39

3 Answers3

4

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.

N Rohler
  • 4,595
  • 24
  • 20
  • The `window.location.hash` returns the id of my div, sorry for the confusion. But that still didn't work. It scrolls to the top most of the page. _See my updated question_ – jovhenni19 Oct 14 '11 at 01:31
  • 6
    $("html, body") is key for compliance with IE8 – gabeodess Jun 18 '13 at 03:13
0

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

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.

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.

Cᴏʀʏ
  • 105,112
  • 20
  • 162
  • 194
0

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.

jovhenni19
  • 450
  • 2
  • 8
  • 24