Help with jquery scrolling

1

I’ve been playing around with jquery, but nothing seems to work. It’s not scrolling when I click on anchor point.

div class="row"> <div class="column column-12"> <nav class="column column-12 navigation nav"> <ul> <li class="active"><a href="#home" class="scrollable">Home</a></li> <li><a href="#portfolio" class="scrollable">Portfolio</a></li> <li><a href="#about" class="scrollable">About</a></li> <li><a href="#contact" class="scrollable">Contact</a></li> </ul> </nav> </div> </div>

JS:

(".nav li").on("click", function() {
$(".nav li").removeClass("active");
$(this).addClass("active");
});

$(document).on("click", "a", function(event) {
$("html, body").animate({
scrollTop: $( $.attr(this, 'href')).offset().top
}, 500);
});

What’s wrong?

2

Can you link to your codepen or project?

Here is an example of one I did: http://codepen.io/gwenf/pen/BoBVXd?editors=0010

3

I have always used the class name of the element I was scrolling to like:

$(“.button”).click(function() {
$(‘html, body’).animate({
scrollTop: $(“.className”).offset().top
}, 1000);
})

4

I don’t believe the $.attr() method is intended to be used that way. (I checked the docs and don’t see it in their examples, either). It’s a method you use on a jQuery collection, so $( this ).attr( ‘href’ ) to read the attribute or $( this ).attr( ‘href’, some_link ) to set the attribute.


$(document).on("click", "a", function(event) {
   $("html, body").animate({ /* <-- Why html and body? You can't animate the scroll position of html element. Just $( 'body' ) would work */
      scrollTop: $( $.attr(this, 'href')).offset().top /* <-- I don't think this is a valid use of the attr method.   */
   }, 500);
});


$(document).on("click", "a", function(event) {

   /* Inside of an event handler, the this keyword is always the element clicked */
   /* Here you want the offset of the anchor tag (which is what you clicked) not the href, which is an attribute of the anchor tag*/


   $("body").animate({
      scrollTop: $( this ).offset().top /* <-- Get the offset of the anchor clicked and animate the body's scrollTop value*/
   }, 500);
});
5

Nothing seems to be working guys. This is the link to my pen http://codepen.io/Limpuls/pen/kkzGoX

6

Well … dang it. I had actually made a suggestion in my first response, but I assumed it was a bad job of copy and paste.

First things first - you need to pay attention to your Javascript console - you’re getting an error on the first line of your JS. You left $ off of the first line, so you’re not making a call to jQuery, you’re getting an error.

That doesn’t solve the problem, but it’s preventing any JS from ever running because you have an error right from the get go.

But … The whole structure needs work.

My Assumptions/Observations
From what I can see, you want to set click event listeners on your nav li so that the scroll to the proper section of your page when clicked.

Right now, your nav li handler only changes classes on the list items - it doesn’t do anything else.

Then, below, you add a second handler to address clicked to list items with an active class.

In this handler, you are trying to scroll the “html, body” to the scrollTop position of a hardcoded string “.className” … which doesn’t exist anywhere in your HTML, so it will never be found.

Finally, the sections of your page (portfolio, about, etc.) have nothing to identify them. No HTML IDs or classes.

Your list item click handler has nothing to reference them by, so it can never scroll to them.

An Approach
Create a menu header with your list items. The item you bind your click handler to should have something to indicate what section it relates to below. It looks like you originally planned to do that with an anchor tag in the nav list item and wanted to read from the href attribute. That makes sense since, if Javascript is not active, the page would normally jump to that spot.

Next, your sections in the page have to be identifiable by the same data accessible to the li click handler. So a unique div ID or classname. Or that anchor tag value.

Next, on click of the li, you need to find out what identifier that li references, then find out the scroll top of that div on the page, then scroll the body.

And while you’re at it, you can toggle your active classes on the clicked li.

All of this can be done in one simple click handler function. But you need to structure your HTML to accommodate it first.

Hope that makes sense!

7

Thanks for broad explanation.

I gave my list items a class of “onee” and class of “scrollable” for anchor tags. Scrolls little bit, but not to the next section, like I want.

Could you explain this more? How can I make handler indicate the other section if all the items have the same class? Nothing unique,

[quote=“michealhall, post:6, topic:47393”]
Next, on click of the li, you need to find out what identifier that li references, then find out the scroll top of that div on the page, then scroll the body.
[/quote] What identifier?

I looked at other examples and they have basic structure with class name for li and anchor, that’s all.

My updated pen: http://codepen.io/Limpuls/pen/kkzGoX?editors=1010
Thanks for helping.

8

Actually it’s scrolling the exact right amount! :slight_smile:

$(".onee").click(function() {
  $('html, body').animate({
    scrollTop: $(".scrollable").offset().top
  }, 1000);
});

This code here is saying:

"Whenever I click on an LI with with class “onee”, set the body scrollTop css property to the offset top position of all elements on the page that are of class “scrollable”. Now, of course you can’t set the scrollTop property to the offset position of all of those items, but you can set it to the first. This is the relevant quote from the jQuery documentation:

.offset()
Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

So, no matter which LI you click, you will always be getting the offset position of the first element with class “scrollable” and setting the scroll position for the body to to that.

And what has a class of scrollable in your HTML markup? Why, your clickable header LIs do! That’s why you are only getting the tiniest bit of scroll - because your LIs are at the top of the page, you are clicking them and your click handler then says, “Set to scrollTop property to the top position of the first of the LIs in the header”, so you get very little change in scroll.

What you need is for your LI to have some attribute you can read - a data attribute or something - or you can use the href property of the anchor tag inside the clicked li. That same property has to exist in some fashion in your HTML down below so that you know where to scroll to …

If that all makes sense, great! Go solve the problem. If not …

I’ve actually forked your pen, you can see it here:

Forked Nav Menu

I tried not to go too far and I wrote some comments about the changes I made.

Have a look, I hope it makes sense. Look it over and pick it apart.

I didn’t want to solve the problem for you … but sometimes you need to see a working solution. Obviously you’re not done yet with the project.

I hope this helps!

~Micheal

9

Thanks a ton, now I finally get it. One last funny thing is, that find(‘a’) is looking for all litrerally a letters in the website, not anchor tags. Why is so?

edit: fixed, but now navigation isn’t clickable.

10

I looked at your JS … it looks like you wrapped some stuff up into the function handle_nav_clicks

However, you never actually call that function anywhere.

Go back and have a look at the JS I posted for you and really see if you can break down what it is doing. The JS in the pen you just posted will never do anything until you call it in your code somewhere. And event then, I think you may have missed the point of why I did it in my example.

Good luck!