Jquery to scroll down to top of each section with button press

Question

This is my code: Js Fiddle

As you can see I have several sections on top of each other with 100% height. I want to know how I can get it so when the user clicks on "learn more" they scroll to the next section, so the top of the section is at the top of the page.

Normally it would be quite simple as I could do this:

$('body').animate({
scrollTop:$(document).height()
});

However this won't work if the user has already scrolled halfway down on of the sections and then hits the button. It would also be good if I could use the same function for each button press, instead of having three different functions, one for each different section.

I guess the code would be something like (in pseudo): scroll to top sectiona + 1

u expecting it to behave this way http://jsfiddle.net/niranjan_borawake/9uxGq/11/ ? — Niranjan Borawake, Jul 03 '14 at 10:04
Should the section move to the top of the page on click or the section should scroll to the top of the view port? — MIdhun Krishna, Jul 03 '14 at 10:05
why you need to jquery? use anchor tag name in your url, to point out the particular section. — Suresh Ponnukalai, Jul 03 '14 at 10:07
That works fine but I was hoping to have a smooth transition — Jimmy, Jul 03 '14 at 10:10

score 2 · Accepted Answer · answered Jul 03 '14 at 10:24

2

with jQuery and smooth scrolling

 $('a').click(function(){
        var nextSection = $(this).closest('section').next('section');
        $('html, body').animate({
            scrollTop: $(nextSection).offset().top
        }, 2000);
    });

answered Jul 03 '14 at 10:24

Torsoe

160
6

This is a nice clean answer, but how do I get it to work in my fiddle? http://jsfiddle.net/9uxGq/20/ – Jimmy Jul 03 '14 at 10:50
1. you have unclosed elements in your document. 2. your id's are not unique 3. in your case it would be easier to define classes to navigate without anchors http://jsfiddle.net/9uxGq/22/ – Torsoe Jul 03 '14 at 10:57

score 0 · Answer 2 · answered Jul 03 '14 at 10:08

0

Why not you pass id's to each section and in href refer to that id like

<section id="sectionOne">
  <a href="#sectionTwo">Move to section two</a>
</section>

<section id="sectionTwo">
  <a href="#sectionOne">Move to section one</a>
</section>

answered Jul 03 '14 at 10:08

Sami

1,041
3
16
32

Use This $("html, body").animate({ scrollTop: $('#sectionNo').offset().top }, 1000); http://stackoverflow.com/questions/6682451/animate-scroll-to-id-on-page-load – Sami Jul 03 '14 at 10:16
this will scroll you to the top of that specific section with a speed of 1 sec. 1000 is the speed of animation in Milli seconds. – Sami Jul 03 '14 at 10:19
But that would need a different function for each button, in order to hard code the next section number? – Jimmy Jul 03 '14 at 10:20
i don't know how to do it in a loop ... but i thnk it would be needed hard coding :( – Sami Jul 03 '14 at 10:24

score 0 · Answer 3 · answered Jul 03 '14 at 10:14

0

You can also try the following.

var amount_to_scroll_by = $(document).scrollTop() + element_to_scroll.getBoundingClientRect().top);

$(document).scrollTop(amount_to_scroll_by); // animate this scroll

Hope this helps :)

answered Jul 03 '14 at 10:14

MIdhun Krishna

1,739
1
13
31

I appreciate that but I'm not really sure how to implement that – Jimmy Jul 03 '14 at 10:22

score 0 · Answer 4 · answered Jul 03 '14 at 10:23

0

Using jquery, you can smoothly scroll to the target.

Here is a SAMPLE

JS:

$("a").click(function(e) {
    e.preventDefault();
    var target = $(this).attr('href');   
    $('html, body').animate({ scrollTop : $(target).offset().top + "px"});    
});

answered Jul 03 '14 at 10:23

qtgye

3,580
2
15
30

Abhitalks · Answer 5 · 2014-07-03T10:53:59.397

You should first fix up your anchors and use the hash fragments to allow for native navigation between anchors.

I have created a very simple demo for you to understand this (not using your markup to keep it simple).

Demo: http://jsfiddle.net/abhitalks/9uxGq/15/

(another demo with your markup: http://jsfiddle.net/abhitalks/9uxGq/19/)

You need two anchors, one as click link and the other to mark the position of target as anchor.

For example:

<div>
    <a id="LearnMore1"></a> <!-- Used for marking the anchor with hash fragment -->
    <h2>Sub Heading 2</h2>
    <p>
        Some text content here
    </p>
    <a href="#LearnMore2">Learn More</a> <!-- Used to click to got to next anchor -->
</div>

Note: Of course instead of using a second anchor as a marker, you could use the div (or in your case section) with an id. But, an a is better because it is more semantic for content navigation and it means an anchor.

Once done, this becomes a fallback for you. Now you can easily implement animations using jQuery etc.

It would be as simple as this:

// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) { 
    e.preventDefault(); // prevent the default behaviour
    var nextAnchor = this.hash.replace("#", ""); // get the next marker anchor 
    var gotoPoint = $("#" + nextAnchor).position().top; // get the position of marker
    $('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});

Alternatively:

// bind click on anchors (use selectors as per your requirements)
$("a").on("click", function(e) { 
    e.preventDefault(); // prevent the default behaviour
    var nextAnchor = $(this).attr('href'); // get the next marker anchor 
    var gotoPoint = $(nextAnchor).position().top; // get the position of marker
    $('body').animate({ scrollTop: gotoPoint }, 'normal'); // animate the body
});

Now applying this to your use case, the demo becomes: http://jsfiddle.net/abhitalks/9uxGq/19/

Hope that helps, and you can work it out in your markup and use-case. .

Jquery to scroll down to top of each section with button press

5 Answers5