1

I am developing a one page website with a vertical smooth scrolling jquery. In the navbar I have Home, About, Services, Gallery and Contact links that are working fine with vertical smooth scroll jquery plugin.

Now, at the bottom of my gallery section I have one sentence (paragraph) which says: If you like my work GET IN TOUCH with me for more information. "GET IN TOUCH" in the same paragraph is actually a small .png file which I want to make functional so when users click on it - it will scroll down to the contact page (just like any of the other links from my navbar that works fine).

Here is my jquery smooth scroll:

$(function () {
    $('header ul a').bind('click', function (event) {
        var $anchor = $(this);

        $('html, body').animate({
            scrollTop: $($anchor.attr('href')).offset().top + "px"
        }, 1500);
        /*
        if you don't want to use the easing effects:
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        */
        event.preventDefault();
    });
});

Here is my paragraph with GET IN TOUCH image:

<div class="getintouch">
    <p class="left">If you like my work</p>
    <img src="images/getintouch.png" />
    <p class="right">for more information.</p>
</div>

I tried to add id="contact" to the <img> like this:

<div class="getintouch">
    <p class="left">If you like my work</p>
    <img id="contact" src="images/getintouch.png" />
    <p class="right">for more information.</p>
</div>

...and then I modified jquery smooth scroll like this:

$(function () {
    $('header ul a, .getintouch img').bind('click', function (event) {
        var $anchor = $(this);

but it's not working.

Not sure if this is possible but I would like to make this GET IN TOUCH.png to scroll down to contact. Hope you guys can help! Thanks

Arturs
  • 1,258
  • 5
  • 21
  • 28
Joanna T.
  • 57
  • 1
  • 5

1 Answers1

0

well fist of all you don't have href attribute in you img....

secondly why not just google - http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page:

function scrollToAnchor(aid){
    var aTag = $("a[name='"+ aid +"']");
    $('html,body').animate({scrollTop: aTag.offset().top},1500);
}

$("#link").click(function() {
   scrollToAnchor('id3');
});

http://jsfiddle.net/BjpWB/1551/

Elen
  • 2,345
  • 3
  • 24
  • 47
  • So I have to add tag around my and then add ID and href into tag, right??? – Joanna T. Aug 30 '13 at 10:53
  • naturally you would use http://www.w3schools.com/html/html_links.asp - anchors to do the job you require, but I understand if you aiming for smooth scroll... anyway, check out the jsfiddle I have updated for you. I think it's what you need – Elen Aug 30 '13 at 10:55
  • Thanks for your kind help. Unfortunately, your jquery is so different than mine that I don't know what to do with it. I thought I only need to slightly change my smooth scroll jquery that I use for navbar links and simply add few changes to the same smoothscroll.js in order to make my getintouch.png work. – Joanna T. Aug 30 '13 at 11:05
  • I added around my and changed jquery into: $('header ul a, .getintouch a') but it takes me to the top of the page. – Joanna T. Aug 30 '13 at 11:07
  • your `href` should point to the contact details holder id. i.e. `href="#concat-info"` - it will jump page to that `id`. Anyway I have created a new fiddle for you - `http://jsfiddle.net/ZJ5sW/` – Elen Aug 30 '13 at 11:22
  • Thanks. I somehow figured out that #contact should be added, just like you said. It works now with my smoothscroll.js but now I have some other issues with CSS and HTML. Anyway, I should be able to figure out those. Appreciate your help! – Joanna T. Aug 30 '13 at 11:28