Jump to content
gdclarke

Smooth scroll to anchor

Recommended Posts

gdclarke    1
gdclarke

Hi - I'm trying to setup smooth scrolling within a single page (when use clicks a link the page smoothly scrolls to the anchor location).  Is there a preferred method to do this with JQuery?

 

Thanks,

Graham

Share this post


Link to post
Share on other sites
James B    436
James B

Hi Graham

 

I wouldn't know on the manual route, but there's some plugins which could help you achieve this effect. Something like - http://wordpress.org/extend/plugins/jquery-smooth-scroll/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Similar Content

    • cas45
      By cas45+
      I am running a site based on PageLines Framework 2.5.0. I am making some changes to a current website and managed to find a script that will do what I want.:
       
      $(".vend-cat").each( function() {
          if ( $(this).find(".no-vendors").html() == '' ) {
                 $(this).hide();
          }
      } );
       
      I have tested it on jsfiddle and it works fine. It does however need to be adapted to work with jQuery for pagelines and wordpress. Any help or advice?
       
      Thanks
    • unifeyed
      By unifeyed+
      Hello there. 
      I am trying to have all the ® symbols throughout my website superscript without having to individually go to each symbol and wrap them in <sup> tags. There is quite a bit of them. I have the following code within the Custom Scripts, but it seems to cause issues with the Hamburger navigation, as it does not seem to work. Can you offer up some assistance? 

      <script>
      jQuery(document).ready(function() {
                 jQuery("body").html(
          jQuery("body").html().replace(/®/gi, '<sup>®</sup>').replace(/®/gi, '<sup>®</sup>')
         );
              });
      </script>
    • ketri
      By ketri
      Hi!

      I'm using a jQuery-plugin called Taeggie (http://taeggie.com/)

      It seems that it requires jQuery version that's later than what comes with WordPress (ver=1.11.3). 
      If I just copy-paste a new jQuery to the section where I use the plugin, it works. But it's probably a very bad idea to load jQuery two times. 

      Can I override the old version of jQuery in functions.php and use a new version like 1.9?  
      Does it have issues with Pagelines or WordPress in general? Why is the version of jQuery that's used with WordPress so old?

      Thank you!
    • leeresources
      By leeresources+
      I keep getting this error :
      Uncaught TypeError: Cannot use 'in' operator to search for 'length' in                                                  jquery.js?ver=1.11.3:2
      r                                  @ jquery.js?ver=1.11.3:2 m.extend.each            @ jquery.js?ver=1.11.3:2 (anonymous function) @ pl.optpanel.js?ver=7ab9c7:283 m.extend.each            @ jquery.js?ver=1.11.3:2 (anonymous function) @ pl.optpanel.js?ver=7ab9c7:282 m.event.dispatch         @ jquery.js?ver=1.11.3:4 m.event.add.r.handle  @ jquery.js?ver=1.11.3:4  
      I have looked at a lot of resolved issues on these forums and nothing has been able to work.
      My changes are not saved after i hit publish and refresh, all the changes I've made disappear. 
      Also i am not able to add backgrounds or any images to the entire site, Rivslider, Quickslider, etc.
    • ipitts
      By ipitts+
      To whom it may concern:
      I am developing a website for a client using the PageLines DMS2 theme and am having an issue getting a custom jQuery function to work using your Hooker plugin. I have used Hooker to add HTML and PHP to the wp_head hook successfully, so I do not understand where the issue exists – I am using the pageslines_after_footer hook to place my jQuery at the bottom of the document (alongside the many other scripts that come with the theme and various other plugins). I checked the document HEAD section and know that jQuery is enabled, and after enabling my custom hook saw that my script was loaded into the footer (as hoped for), but it is not working.
      I am trying to make a simple, custom back-to-top button that appears after a user has scrolled the page a certain distance, as calculated in jQuery. After an hour, I decided to troubleshoot my script on a test WordPress site on my localhost (using jQuery version 1.11.3) and it works exactly as intended. I would like to avoid writing any code within the DMS2 theme files if possible.
      I have also tried the wp_head, wp_footer and pagelines_before_footer hooks to no avail. Am I using the wrong hook(s)? What else can I try?
      My code:
      HTML
      <a href="#"><div id="bttb-cont" style="">Hello</div></a>
       
      jQuery (within the Hooker plugin)
      <script type="text/javascript">
                      $(document).scroll(function() {
                                      var windowHeight = $(window).height() / 7;
                                      var scroll = $(window).scrollTop();
                                      
                                      if (scroll > windowHeight) {
                                                      $('#bttb-cont').fadeIn();
                                      } else {
                                                      $('#bttb-cont').fadeOut();
                                      };
                      });
      </script>
       
      As you can see, it is a very simple script.. Any help on this matter will be greatly appreciated.
       
×