Forums

Smooth Scrolling Anchors in C5

Permalink 1 user found helpful
I am trying to implement a simple JQuery script that will make it so when you click on the navigation, it will scroll smoothly to the anchor link. I have the anchor links set to the divs, not the editable areas. When using this plugin on a static html site, it works fine, but when I use it in conjunction with C5, the function won't run. any ideas?

here is my header script.

<?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>

<!-- Site Header Content //-->
<link href="<?php echo $this->getThemePath(); ?>/css/reset.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->getThemePath(); ?>/css/main.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $this->getThemePath(); ?>/css/typography.css" rel="stylesheet" type="text/css" />
<script src="<?php echo $this->getThemePath() ?>/js/jquery.js" type="text/javascript"></script>
<script src="<?php echo $this->getThemePath() ?>/js/jquery.easing.1.3.js" type="text/javascript"> </script>
<script src="<?php echo $this->getThemePath() ?>/js/jquery.plusanchor.js" type="text/javascript"> </script>

<script type="text/javascript">
$(document).ready(function(){

$('body').plusAnchor({
easing: 'easeInQuad',
speed: 300
});

});
</script>

<?php
Loader::element('header_required');
?>

</head>
 
adajad replied on at Permalink Reply
adajad
C5 loads jQuery by default (and it looks like you are loading it too), so you shouldn't load it in your theme.
Remove
<script src="<?php echo $this->getThemePath() ?>/js/jquery.js" type="text/javascript"></script>


Make sure you clear your site and browser cache to see the result.

EDIT: Loading jQuery more than once can give unexpected results.
pfarris2010 replied on at Permalink Reply
Thanks! Unfortunately, it's still a no go. When I click the anchor it hops right on down, but still doesn't load the function. I appreciate the advice though!
alivetech replied on at Permalink Reply
alivetech
I have successfully implemented this.

The code below is called at the end of head.

function anchor_scroll() {
   $('html, body').hide();
   var jump = function(e) {
      if (e && e != parseInt(e)) {
         e.preventDefault();
         var target = $(this).attr('href');
      } else {
         var target = location.hash;
      }
      target = target.substr(target.indexOf('#'));
      $('a[href*=#]').removeClass('nav-selected nav-path-selected');
      $('a[href*=' + target + ']').addClass('nav-selected nav-path-selected');
      if (target.length == 1) {
         $('a[href*=#]').removeClass('nav-selected nav-path-selected');
         $('html,body').animate({
Viewing 15 lines of 41 lines. View entire code block.
3hawk replied on at Permalink Reply
3hawk
A year-plus later, I'm very grateful to alivetech. This is a function that will be increasingly demanded, and it's theoretically so simple (easing in to an anchor within a page) that it's funny that it's so hard to come by.

Thank you!
obaluba replied on at Permalink Reply
Hi all,

This would be useful for me too..

I've added the code to the top of my page, what does the anchor URL have to look like?

<a id="anchor1" class="anchorLink" href="#myAnchor" rel="">Link to the anchor</a>

I have the above. The anchor works but there is no smooth scroll?

Any ideas?
alivetech replied on at Permalink Reply
alivetech
Hi obaluba,

Did you click "View entire code block" in the bottom right of the post?

I've run into that before when trying to implement a solution from here...