scroll to section

I have a Single Page App and I want to scroll to another section from a link on my landing page to another section.  What in your opinion is the best way to do that with current technology?  Javascritpt, Jquery, Other??  And how.
LVL 2
Christopher GoreSolutions ArchitectAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

M. TariqApplication DeveloperCommented:
you can use anyone that fit your scenario
The Jquery one is easy and efficient though.
         $('html,body').animate({
                            scrollTop: $("#Element_ID").offset().top
                        },
       'slow');

Open in new window

0
Christopher GoreSolutions ArchitectAuthor Commented:
This is what I have.  It jumps to the section but does not scroll.  Am I missing something?  Link to JQuery CDN?  I tried that too.

<a href="#section-a" class="button">Read More</a>
    <!-- scroll to section -->
    <script>$('html,body').animate({
                            scrollTop: $("#section-a").offset().top
                        },
       'slow');</script>

Open in new window


Also, if the page is refreshed, I would like it to go back to the top on the landing page.
0
Christopher GoreSolutions ArchitectAuthor Commented:
I got it to work for scroll with adding this code:

$(document).ready(function(e) {   

Open in new window


but it scrolls on load.  I want it to scroll onClick of the "Read More" button.  On load I just want it to go to the landing page, not the section-a.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Julian HansenCommented:
You need to bind the click event of the <a> to the event handler that does the scroll

One way to do this is to use a class to identify items that you want to scroll.
HTML
<a href="#section-a" class="button scroll-to">Read More</a>

Open in new window

jQuery
<script src="http://code.jquery.com"></script>
<script>
$(function() {
  // BIND TO THE CLICK EVENT ON ELEMENTS WITH CLASS .scroll-to
  $('.scroll-to').click(function(e) {

    // DISABLE DEFAULT BEHAVIOUR OF ELEMENT
    e.preventDefault();
	
	// GET THE TARGET 
    var href = $(this).attr('href');    
	
	// START THE ANIMATION TO THE target OFFSET
    $('html,body').animate({
      scrollTop: $(href).offset().top
      },
    500);  
  });
});
</script>

Open in new window

I have put a working sample here
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Christopher GoreSolutions ArchitectAuthor Commented:
I added the jQuery CDN instead of code.jquery.com

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Open in new window


I added this to always start at the top when loaded or reloaded.
<script>$(function() {
     $('body').scrollTop(0);
   });</script>

Open in new window

0
Christopher GoreSolutions ArchitectAuthor Commented:
This worked good.  Thanks for the demo.
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS Animation

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.