1

I have a div set up as a link. On click, it travels to an anchor within the page. Used this method to make an entire div a link: Make Div a Link

The problem is not the function of the link itself, but that I can't get it to smooth scroll to the anchor. Smooth scrolling was working prior to setting the div as the link (when it was just a text link).

Can't get the two scripts to play nicely.

$(document).ready(function() {
    $('a').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    });
    $("div#learnMore").click(function() {
        window.location = $(this).find("a").attr("href");
        return false;
    });
});

Set up a JSFiddle here with the full code: http://jsfiddle.net/HNbdm

Any insight would be greatly appreciated!

Community
  • 1
  • 1
Amanda
  • 11
  • 1
  • 1
    what you are looking for is a slight changed version of a "smooth scroll to top" button try searching that in google https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView – vico Jun 17 '14 at 21:48
  • 1
    Is there a reason you're using both methods? – apaul Jun 17 '14 at 23:29
  • [This](http://jsfiddle.net/AstroCB/HNbdm/3/) works fine for me. – AstroCB Jun 17 '14 at 23:35
  • possible duplicate of [jQuery scroll To Element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) – Aurelio Jun 17 '14 at 23:42

1 Answers1

0

I'm not sure why you have $($.attr(this, 'href')).

I'm also not sure why you're using both functions here. All you need is one:

$("#learnMore").click(function() {
    $("html, body").animate({
        scrollTop: $("#more").offset().top
    });
});

When you click on the #learnMore div, it scrolls the page to the top of your #more div smoothly.

Demo

AstroCB
  • 12,337
  • 20
  • 57
  • 73