Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

scroll to section

Posted on 2017-08-16
7
Medium Priority
?
92 Views
Last Modified: 2017-08-16
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.
0
Comment
Question by:Christopher Gore
  • 4
  • 2
7 Comments
 
LVL 4

Expert Comment

by:M. Tariq
ID: 42256933
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 42257123
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 42257179
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 42257211
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
 
LVL 1

Author Comment

by:Christopher Gore
ID: 42257242
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
 
LVL 1

Author Closing Comment

by:Christopher Gore
ID: 42257246
This worked good.  Thanks for the demo.
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 42257249
You are welcome.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

876 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question