Small issue with java scrolling script

Hi,

I am using this java piece to smoothly scroll up on the website (when you click on something that has # id, it scrolls up or down to it)

$(document).ready(function(){
  $('a[href*=#]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
    && location.hostname == this.hostname) {
      var $target = $(this.hash);
      $target = $target.length && $target
      || $('[name=' + this.hash.slice(1) +']');
      if ($target.length) {
        var targetOffset = $target.offset().top;
        $('html,body')
        .animate({scrollTop: targetOffset}, 1000);
       return false;
      }
    }
  });
});

PHP:

problem is, it only works when using a TEXT link, it doesn't work on hyperlinked images (for some reason..)

So, works:

<a href="#header">top</a>

HTML:

Doesn't work:

<a href="#header">
<img src="http://wpthemes.toptut.com/wp-content/themes/omniblock/images/bucket.png" />
</a>

HTML:

is there any way to make it work with images as well? anyone knows how?

Thanks in advance, I'd really appreciate any help!

 

it looks like the problem is not with the fragment of code You sent here (above fragment just scroll to DOM elements with name attribute equal to anchor part of the link). So it should work for normal links and for hyperlinked images.

however, I suppose that another part of javascript on Your website assign name attribute for normal links and not for hyperlinked images.

ps: send a link to Your website to verify that.

 

i don't see a problem at all.

http://dci.uk.net/jquery/scoller.php it works fine. just make sure the target element has an id #header and is unique.

 

lol, nice range of unrelated subjects there

 

Thanks everyone for your responses!

wow. Thank you so much for your reply, genius!
how did you manage that?

If you have a few spare minutes, please have a look here (still in development so ignore any wp-based errors please). scroll all the way down -- both paint bucket (on the left) and the "back to TOP" text should take you to the header, although the image does bring me to #header when I click it, it goes without smooth scrolling, however it scrolls smoothly when I click the text.

What you said about the id being unique... did you mean I can't have 2 links on the page pointing at #header, or..?

Thank you very much in advance!

 

is this meant to be sarcastic? sorry but if so, then you really have no place asking for help. you are using a combination of scripts you don't understand in a way that will conflict with each other, for instance, you have a onload AND document.ready. this kind of patchwork will not render good results if you are unable to resolve conflicts and troubleshoot. last thing you need to be doing is being condescending when somebody proves the fault does not lie within the code that was posted.

- also told the same and rightly so.

quite frankly, you can do this w/o the tinyscrolling singleton which is not even jQuery from jscript.js - remove it, it's likely what is causing the problem. plus, you don't need it as all the functionality to scroll etc is built into jquery.
then what you need done is something like the snippet below -- it works on your site (but some js exceptions show due to tinyscrolling)

$(document).ready(function(){
    // run for each selector 
    $('a[href*=#]').each(function(i, el) {
        // get target href
        var target = $(el).attr("href");
        // only consider these that start with a #
        if (target.substr(0,1) == "#") {
            // add click events
            $(el).click(function(e) {
                // stop click propagation 
                e.preventDefault();
                
                // do nothing if target does not exist   
                if (!$(target).length)
                    return false;

                // else, animate
                $('html,body').animate({
                    scrollTop: $(target).offset().top
                }, 1000);
            });
        }
    });
});

Code (javascript):

by unique, I mean make sure that there is just 1 id=header, you can have 100s of links to it.

 

Oh, you toooootally misunderstood me, dimitar!
I wasn't even a tiny bit sarcastic, I was actually amazed that it worked for you and that you took extra trouble to put it up on your website for me. I am a designer, and the most advanced thing I am capabale of doing is chop a psd file up, mash it until it become an xhtml or wordpress template, that is all. anything beyond it -- is way over my head.

I am very new to jquery/java/ajax, and frankly speaking I don't think I will ever really learn HOW it works, as long as it works somehow on sites that I have constructed.

ok if the scripts collide, will remove that, again, i had no clue the scrolling is already a part of jquery -- I just followed a tutorial online on how to add the smooth scrolling, and it said one should add BOTH jquery and the scrolling script.

Just one last question, if I may... that bit of code you kindly posted, where exactly should I add it?

Thank you very much!

 

right--no worries.

jscript.js you have

/*
6Tiny Scrolling - a smooth navigation between internal links and their destinations
7by Marco Rosella - http://www.centralscrutinizer.it/en/design/js-php/tiny-scrolling
8based on the works by Travis Beckham and Brian McAllister.
9v0.3 - March 27, 2006
10*/
11
12window.onload = function() {
13 tinyScrolling.init();
14 }
15
16var tinyScrolling = { .... 

Code (javascript):

etc etc. - all the way until dropdown menu must go.

then

paste my code into scroll.js if you like (instead of the code there).

that ought to do it - backup the 2 files just in case