Scroll to top of text

  • Resolved domino4evers

    (@domino4evers)


    5 years, 8 months ago

    Hi there

    Thanks for a great plugin!

    I am have some difficulties with the “show less” function.

    If I expand a long text, and scroll down to the bottom of the text, and click show less (that I have placed under my expanded text), I want the text to collapse so it follows up to the “show more” text. Just like your example “Black dots” on the page: https://showhide.bunte-giraffe.de/your-amazing-brain-what-do-you-see/

    Mine dosen’t scroll up to the “Show more” text again. Mine is doing something more like the “Do you see shapes or a word?”

    • This topic was modified 5 years, 8 months ago by domino4evers.
Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author buntegiraffe

    (@buntegiraffe)

    Hello @domino4evers,

    It behaves this way because it is the end of the page. However, there is a way to achieve what you want.

    If you are familiar with JavScript and can edit it, please log in to your site using FTP protocol (e.g. using FileZilla), go to wp-content/plugins/show-hidecollapse-expand/assets/js/ and edit bg-show-hide.js file the following way:

    Find a line jQuery(showHideButton).toggleClass("bg-close");

    and add this piece of code underneath:

    showHideButton.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

    so that it becomes:

    jQuery(showHideButton).toggleClass("bg-close");
showHideButton.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});

    This should do the trick.

    Please let me know if it worked for you.

    Thread Starter domino4evers

    (@domino4evers)

    Hi there

    Not quiet.

    Look: https://193.163.39.143/~kastrupvinduet/unikke-kompetencer/arkitektur-og-design-4/

    It’s the first “Show more” on the left, now it pulls down the full page?

    Thread Starter domino4evers

    (@domino4evers)

    Any news on the small problem?

    Plugin Author buntegiraffe

    (@buntegiraffe)

    Hi,

    Sorry, I am currently on vacation and will only be able to look at this properly after the 12th. Hope you can have it the way it is by then. If the last solution was buggy, please reinstall the plugin, it will work as before.

    Best regards

    Thread Starter domino4evers

    (@domino4evers)

    Hi there

    Hope you can help with the small problem with the scrolling function on the plugin.

    Best Regards
    Kim Domino Evers

    Plugin Author buntegiraffe

    (@buntegiraffe)

    Hi @domino4evers

    I have tested and this should work:

    if (jQuery(showHideButton).hasClass("bg-close")) {
  showHideButton.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

    Please insert at the same line as instructed in the previous post, so it becomes:

    jQuery(showHideButton).toggleClass("bg-close");
if (jQuery(showHideButton).hasClass("bg-close")) {
  showHideButton.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}

    Please let me know if the issue is resolved now.

    Best regards

    Plugin Author buntegiraffe

    (@buntegiraffe)

    @domino4evers

    If you want it to also scroll to top when you close the expanded text, add this:

    if (jQuery(showHideButton).hasClass("bg-close")) {
  showHideButton.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
else {
  showHideButton.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}

    Best regards

    Thread Starter domino4evers

    (@domino4evers)

    Hi there

    I have added the code:

    if (jQuery(showHideButton).hasClass("bg-close")) {
  showHideButton.scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});
}
else {
  showHideButton.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}

    And it works with Show More, but if I Show More, scroll a little down, like I have read the text, and click Show Less. The Show less disappears in the top.

    I would like that the page follows up with the Show Less, so the Show Less is visible.

    https://193.163.39.143/~kastrupvinduet/unikke-kompetencer/arkitektur-og-design-4/

    Thread Starter domino4evers

    (@domino4evers)

    Hi there

    I actually found just the solution I am looking for: https://mxii.eu.org/2017/09/07/javascript-spoiler-with-a-twist-collapsing-up-or-down/

    Try “click to show”, then scroll down til you just can se the “click to hide”, and then close it

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Scroll to top of text’ is closed to new replies.