WordPress.org

Ready to get started?Download WordPress

Forums

Page scroll to id
[resolved] this plugin work for scroll with animation for different pages ? (9 posts)

  1. grigione
    Member
    Posted 6 months ago #

    I want know if this plugin work for scroll with animation with menu that have different pages or work only for a single page in which there are different sections?

    For example
    in my test site : http://personal.1eko.com/
    i have a menu with

    Home test1 test2 test3 test4 test5 section1 section2
    If i click section1 and section2 that linking to sections in same page it work but if i click on test1 test2 test3 test4 test5 or their submenu
    its directly jumps to ids with no animations but work as a normal anchor
    I want for example click on menu test1 load page test1 and immediately after scroll with animation to div anchor

    https://wordpress.org/plugins/page-scroll-to-id/

  2. malihu
    Member
    Plugin Author

    Posted 6 months ago #

    Hello,

    What you're describing can only be done by using a deep-linking plugin. There isn't an "easy" way of preventing browser's default hash behaviour when a page loads. Deep-linking plugins use pseudo-hash (e.g. #/id) in order to accomplish such behaviour.

    Another way would be to have the target element hidden by default and show it when page is loaded (more info: http://stackoverflow.com/questions/3659072/jquery-disable-anchor-jump-when-loading-a-page/17950528#17950528). When the element is visible, you could use Page scroll to id scrollTo method to scroll to your target section (more info: http://manos.malihu.gr/page-scroll-to-id/#methods-section).

  3. grigione
    Member
    Posted 6 months ago #

    So there is no mode that i can use your plugin for this?
    what is deeep linking?
    I have tried to replace :
    http://personal.1eko.com/test1/#test1
    with
    http://personal.1eko.com/test1/#/test1
    but don't work

    Can you insert perhaps a timeout function that wait page complete loading and after execute scrol function?

    I have found that in this post have created a function with this behavior
    http://stackoverflow.com/questions/9652944/jquery-page-scroll-to-different-page
    working example
    http://vostrel.cz/so/9652944/page.html

  4. malihu
    Member
    Plugin Author

    Posted 6 months ago #

    At least for now, I cannot add such functionality in plugin's core.

    You really need to add such script manually (as you have) in the page(s) you want this behaviour to take place. You can also use plugin's scrollTo method in your script (instead of the additional jquery .animate() in your link).

    Some deep-linking plugins:
    http://www.asual.com/jquery/address/
    http://benalman.com/projects/jquery-hashchange-plugin/

  5. malihu
    Member
    Plugin Author

    Posted 5 months ago #

    For reference, I'm posting a sample-working script for scrolling to url hash on page load. The following script should be added in the page/theme manually.

    <script>
        (function($){
            if(location.hash){
                $(window).scrollTop(0); //stop jump to hash straight away
                setTimeout(function(){
                    //stop jump to hash again a bit later
                    //for browser compatibility
                    $(window).scrollTop(0);
                },1);
            }
            $(window).load(function(){
                if(location.hash){
                    setTimeout(function(){
                        //use page scroll to id scrollTo method
                        //to animate page to location hash
                        $.mPageScroll2id("scrollTo",location.hash);
                    },1);
                }
            });
        })(jQuery);
    </script>
  6. phildaponte
    Member
    Posted 5 months ago #

    Hi Grigione,
    I saw on your test website(http://personal.1eko.com/test1/#test1) that you resolved the problem. How did you accomplish that? That's exactly what i'm looking for...

    Thank you

  7. grigione
    Member
    Posted 5 months ago #

    I have added manually script from this page
    http://stackoverflow.com/questions/9652944/jquery-page-scroll-to-different-page
    Also I'm waiting that some plugin make this.. however

  8. malihu
    Member
    Plugin Author

    Posted 4 months ago #

    This functionality is now added in version 1.5.5. Check "Scroll to location hash" option in plugin settings to enable.

  9. Murque
    Member
    Posted 3 months ago #

    Hi Grigione,

    I saw that you managed to add the #test to the URL while scrolling.
    I tried a lot to accomplish that, but did not succeed.
    Could you tell me how you did that?

    Thanks in advance...!

Reply

You must log in to post.

About this Plugin

About this Topic

Tags

No tags yet.