Can I use scrollTop without writing a function?

Question

I've got some trouble with my jQuery and was looking for some solutions to add something to my already existing slideDown function.

What looked very interesting to me is this question/answer from 2010 http://stackoverflow.com/questions/4034659/is-it-possible-to-animate-scrollop-with-jquery

The difference to that question is that I'm looking for a solution to scrollTop each time to a different <a> anchor.

In my example below, the <a href"#"> is suppose to move to the top.

Is that possible?

HTML

<div class="next_btn" id="next_btn_show_step_3">
    <a href="#"><?php echo $lang ['next']; ?></a>
</div>
<article class="order_form_step_3" id="banner_step_3">
</article>

jQuery

$(document).ready(function(){
  $("#banner_step_3").hide();

  $("#next_btn_show_step_3").click(function(e){
    $("#banner_step_3").slideDown(500);
    e.preventDefault();
  });
});

score 2 · Accepted Answer · answered Dec 17 '13 at 00:18

2

You could easily adapt that answer like this:

$("html, body").animate({ scrollTop: Math.floor($('#yourElement').offset().top) + "px" });

answered Dec 17 '13 at 00:18

tckmn

57,719
27
114
156

Thanks a lot, I just tried it and it works great! +1 since I struggling with this for almost 2 days now... – Stefan Weiss Dec 17 '13 at 01:55
This doesn't explain how to add to the existing `slideDown` function to scroll to a different `anchor` when each is clicked like OPs question asked, only how to scroll to one element by `id`. – FiLeVeR10 Dec 17 '13 at 13:05

FiLeVeR10 · Answer 2 · 2013-12-17T00:38:09.083

0

jquery

$('.next_btn a').on('click', function(e) {//on link click
    var th = $(this);//get element
    th.parent().next('article').slideDown(500);//slide down
    $('html, body').animate({ scrollTop: th.offset().top }, 500);//scrollto link
    e.preventDefault();//prevent default
});

edited Dec 17 '13 at 00:38

answered Dec 17 '13 at 00:20

FiLeVeR10

2,155
1
12
13

Can I use scrollTop without writing a function?

2 Answers2