CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12517

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

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

Upvotes: 0

Views: 5324

Answers (5)

Abhitalks
Abhitalks

Reputation: 28437

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. .

Upvotes: 0

Torsoe
Torsoe

Reputation: 160

with jQuery and smooth scrolling

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

Upvotes: 2

qtgye
qtgye

Reputation: 3610

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"});    
});

Upvotes: 0

Midhun Krishna
Midhun Krishna

Reputation: 1759

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 :)

Upvotes: 0

Sami
Sami

Reputation: 1051

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>

Upvotes: 0

Related Questions