ScrollTop function: Page goes back to the top when I click on more toggle

Question

On my page, I have a number of long paragraphs with 'more' links to toggle additional text.

When clicking on the 'more' toggle, the page should move up by 100px to show the new text without the user having to scroll.

The code I'm using for this is:

$("html, body").animate({ scrollTop: "100px" });

At this moment, this works only on the first link 'Home1' - when clicking "more" on home1 it moves up 100px

But on other links (Home2/Home3), the page moves back to 'Home1' when clicking on more.

What am I doing wrong?

$(document).ready(function() {
  var ellipsestext = "...",
    moretext = "More",
    lesstext = "Less",
    showChar;
  $('.more').each(function() {
    var content = $(this).html();
    
    showChar = content.search(/<!\-\-\s*break\s*\-\->/);
    if (content.length > showChar && showChar != -1) {


      var c = content.substr(0, showChar);
      var h = content.substr(showChar, content.length - showChar);

      var html = c + '<span class="moreellipses">' + ellipsestext + '&nbsp;</span><span class="morecontent"><span>' + h + '</span>&nbsp;&nbsp;<a href="" class="morelink">' + moretext + '</a></span>';

      $(this).html(html);

    }

  });

  $(".morelink").click(function() {
    if ($(this).hasClass("less")) {

      $(this).removeClass("less");
      $(this).html(moretext);

    } else {
      $(this).addClass("less");
      $(this).html(lesstext);
       // Example : Scroll the window at 100px from the top
      $("html, body").animate({ scrollTop: "100px" });
      

    }
    $(this).parent().prev().toggle();
    $(this).prev().toggle();

    return false;
  });
});

<li><a class="first" href="#f">Home1</a></li>
<li><a class="second" href="#second">Home2</a></li>
<li><a class="third" href="#third">Home3</a></li>

Here's a jsfiddle with text.

EDIT: updated text and added jsfiddle as agreed through comments. Clarifies "homepage" vs "Home1" section on the page.

Thanks for comment. Here is the fiddle: https://jsfiddle.net/Tokyo/guverqxf/ — Kami, Sep 11 '15 at 12:13
Next question: can you give us a jsfiddle that demonstrates the problem - this one seems to work fine. The more link changes to less/more and (annoyingly) scrolls to the top as per the code. Doesn't redirect anywhere. — freedomn-m, Sep 11 '15 at 12:16
An an aside: because you're using `.toggle`, it gets round the wrong way so "less" shows more and "more" hides the additional text. Don't use toggle, explicitly hide/show inside the `if` — freedomn-m, Sep 11 '15 at 12:18
why are you using **$("html, body").animate({ scrollTop: "100px" });**, if you remove this it works fine. — Sahil, Sep 11 '15 at 12:21
I don't know why the more and less is messing up and changing the place. it does not when I have it on my Sublime2 and see it on browser. But that is not my problem. My problem is here: When I click on "more" the rest of the text will show. When clicking on "mor"e I also want the article to move up 100px so that we can see more of the text without having to scroll. This is the reason why I use $("html, body").animate({ scrollTop: "100px" }); for it to move smoothly. — Kami, Sep 11 '15 at 12:35
I thought the issue was that clicking more goes back to the homepage? At least that's what it says in the question title... (the more/less was just an aside, it's not part of the question/answer) — freedomn-m, Sep 11 '15 at 12:52
Yes you are correct. My problem was not the more/less. The problem was when I click "more" on pages Home2 or Home3 it goes back to homepage. It should move 100px up has it does on Home1 when clicking on more not moving back to the Homepage. sorry for confusing. — Kami, Sep 11 '15 at 12:54
Ok - understand from this comment and your other comment that clicking "more" on Home2/Home3 jumps back to the top **Home1** not that it r*edirects* to the *homepage*. The "homepage" is the start page of your application (eg stackoverflow.com vs the url for this question). Mind if I update the question to make this clearer? — freedomn-m, Sep 11 '15 at 13:15
freedomn-m, could you please post your answer again. I want to keep it has reference, and still working on the problem. It does not work still after following changes you showed me... — Kami, Sep 11 '15 at 13:31
Sorry, I deleted the answer as it had nothing to do with your problem :) — freedomn-m, Sep 11 '15 at 13:36

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

This issue is, as you've guessed, with your scrolltop code:

$("html, body").animate({ scrollTop: "100px" });

scrollTop says, move this element (html,body) to the specified position (not by the amount)

The specified position here is "100px" - so every "more" link scrolls the page to 100px - making it appear that they all go back to 'Home1'.

This question and answer provide more detail.

Essentially, you need to take the current position and add 100px to it, eg (taken from a comment in the linked question) :

var y = $(window).scrollTop(); 
$("html, body").animate({ scrollTop: y + 100 }, 600);

edited May 23 '17 at 11:58

Community

1
1

answered Sep 11 '15 at 13:33

freedomn-m

27,664
8
35
57

Now is finally finally working!! Thank you for taking so much time on helping! Really appreciate! :)) – Kami Sep 11 '15 at 13:47
The more and less still is messing up on fiddle. I don't understand why it does that on fiddle. I have my code on Sublime text 2 and then I browse it on internet, it looks fine no problem. – Kami Sep 11 '15 at 14:01

ScrollTop function: Page goes back to the top when I click on more toggle

1 Answers1