By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,649 Members | 696 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,649 IT Pros & Developers. It's quick & easy.

What's wrong with this slideDown?

P: 97
I have a jQuery function that is supposed to slide the page to a particular place, but it won't go.

This is it:

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function(){
  2. $(".col2 h1:first").slideDown("slow");
  3. });
  4.  
As you can see it's supposed to slide to the first h1 in the section with the class of col2. Do animations not work on <section>'s? Is there something wrong with my function?
Jun 19 '15 #1
Share this Question
Share on Google+
8 Replies


Dormilich
Expert Mod 5K+
P: 8,639
I have a jQuery function that is supposed to slide the page to a particular place, but it won't go.
thatís because .slideDown() does not scroll to a position. itís an animated version of .show().
Jun 19 '15 #2

P: 97
Thanks. After some googling I found that the function I need is 'animate'. Actually, this is the solution:

Expand|Select|Wrap|Line Numbers
  1. $(document).ready(function (){
  2. $('html, body').animate({
  3. scrollTop: $(".col2 h1:first").offset().top
  4. }, 1000);
  5. });
  6.  
Jun 22 '15 #3

P: 97
I just wanted to add one more thing. I wanted this only for mobile devices, so I added a bit extra. It's now like this:

Expand|Select|Wrap|Line Numbers
  1. if (document.documentElement.clientWidth < 400) {
  2. $(document).ready(function (){
  3. $('html, body').animate({
  4. scrollTop: $(".col2 h1:first").offset().top
  5. }, 1000);
  6. });
  7. }
  8.  
Jun 22 '15 #4

P: 97
Actually, I had ANOTHER issue with this. This function was breaking the rest of my js file when the element didn't exist on a page, so I made the (hopefully) final code this:

Expand|Select|Wrap|Line Numbers
  1. if (document.documentElement.clientWidth < 400) {
  2. if($(".col2 h1:first").length){
  3. $(document).ready(function (){
  4. $('html, body').animate({
  5. scrollTop: $(".col2 h1:first").offset().top
  6. }, 1000);
  7. });}}
  8.  
Jun 22 '15 #5

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. if($(".col2 h1").length){
would suffice, if you can find any <h1> under that class, you will automatically have a first <h1> there (and additionally you don’t need at this point the overhead of the :first selector)
Jun 22 '15 #6

P: 97
I've tested this and your right. In fact, I don't think I even have a second h1 on any pages, anyway.
Jun 22 '15 #7

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. $('html, body')
here it would suffice to do either $('body') or $(document.body) since no <h1> is allowed outside <body>.
Jun 23 '15 #8

P: 97
Right again. And, to keep the file a few bytes smaller I left it simply as $("body')
Jun 23 '15 #9

Post your reply

Sign in to post your reply or Sign up for a free account.