CODEWITHSUNDEEP
javascriptjqueryhtmlwordpress
evavienna
evavienna

Reputation: 1119

How to scroll to top of my single pages with jQuery?

I'm using the following code in an onAppend function to scroll to the top of any page.

The scroll should fire after a play button is clicked and a YouTube vid is starting to load - the function has a onAppend event which works fine...

So I just need the scroll function. Now I tried to implement this code just to all of my single WordPress posts.

EDIT: The solution on jQuery scroll to element does not work in this case. So the "possible duplicate" request should be ignored.

var body = jQuery("html, body");
    body.stop().animate({scrollTop:0}, 500, function() { 
    // alert("Finished animating");
});

The HTML of the single posts looks like

<html prefix="og: http://ogp.me/ns#" lang="en-US">
    <head>...</head>
    <body class="post-template-default single single-post postid-880">
        <nav id="menu" class="xs-menu">....</nav>
        <div id="single-post-wrapper" class="single-post-class">
        ...
        </div>
    </body>
</html>

Any idea how to scroll ONLY to the top of the single posts in WordPress - for example to the #single-post-wrapper or to the top top of the entire post?

Upvotes: 2

Views: 243

Answers (2)

Bourbia Brahim
Bourbia Brahim

Reputation: 14712

you can scroll to an element by passing it's top windows offset as $(selector).offset().top

See this working snippet 

$(".stop").on("click",function(e){
  $('html, body').animate({
		scrollTop:0}, 'slow');
});


$(".spost").on("click",function(e){
  $('html, body').animate({
		scrollTop:$("#single-post-wrapper").offset().top
    }, 'slow');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="body">
<button class="stop">scroll to top</button>
    <button class="spost">scroll to single-post-wrapper</button>
    
    <div class="post-template-default single single-post postid-880">
        <nav id="menu" class="xs-menu">menu</nav>
        <br><br><br><br><br>
        <div id="single-post-wrapper" class="single-post-class">
      single-post-wrapper<button class="stop">scroll to top</button>  <br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text
        </div>
    </div>
    
    
    <button class="stop">scroll to top</button>
    <button class="spost">scroll to single-post-wrapper</button>
    
</div>

Upvotes: 1

Aravind S
Aravind S

Reputation: 2395

try this code...where id is the wrap 

            var id = "get your id here";
            jQuery("html, body").animate({
               scrollTop : jQuery(id).offset().top
            }, 1800);

Thanks !

Upvotes: 0

Related Questions