2

Im 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 wich 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 ?

Spring
  • 12,325
  • 4
  • 30
  • 43
evavienna
  • 747
  • 6
  • 19
  • 1
    On what do you wanna fire a scroll? Could you show structure how multiple posts look in HTML? Do they have a wrapper? Do they have unique id's? Do you fire a scroll from within them or from somewhere else completely? IMHO those are essentials for a clean answer here, as of now it's guessing. By top of page you mean to the top of entire page or just some post? – DanteTheSmith Dec 20 '17 at 13:41
  • @DanteTheSmith - i will update my question... – evavienna Dec 20 '17 at 13:50
  • add some condition around your animate, to check if your are on a single post – enno.void Dec 20 '17 at 13:55
  • @DanteTheSmith - i updated the question. Yes there is a wrap with an id. It should be enough to scroll to #single-post-wrapper. The scroll should fire after a play button is clicked and a youtube vid is starting to load - the function has a onAppend event wich works fine... so i just need the scroll function – evavienna Dec 20 '17 at 13:57
  • Possible duplicate of [jQuery scroll to element](https://stackoverflow.com/questions/6677035/jquery-scroll-to-element) – Mosh Feu Dec 20 '17 at 13:59
  • @mr.void - i put the code into a custom.js file. I have no idea how to put a condition to the function like "if is single" in Wordpress or so.... i only try to scroll to the #single-post-wrapper... – evavienna Dec 20 '17 at 14:01
  • @MoshFeu - your mentioned answer dont work in my case – evavienna Dec 20 '17 at 14:24
  • It's the exact answer you just accepted.. – Mosh Feu Dec 20 '17 at 14:57

2 Answers2

1

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>
Spring
  • 12,325
  • 4
  • 30
  • 43
0

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 !

Aravind S
  • 2,165
  • 2
  • 10
  • 19