WordPress & Scroll To Plugin

  • I designed a large WordPress based website, that has horizontal scrolling.

    I have a navigation that uses anchors in order to scroll to

    the different parts of the page, like so:

    <li><a href="#contact">Contact</a></li>

    I d like the scrolling to be smoother. Thats why I decided

    to use the “scroll to” plugin. It just doenst work.

    I included the following lines of code in the header:

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
<script type='text/javascript' src='/js/jquery.scrollTo-min.js'></script>
<script type='text/javascript' src='js/jquery.localscroll-min.js'></script>
<script type='text/javascript' src='js/init.js'></script>

    Is there anything else that I have to do in order to activate it ?

    Do I have to edit the links maybe ??

Viewing 3 replies - 1 through 3 (of 3 total)

  • Can you link to the scroll-to plugin so we know what you are working with?

    Thread Starter vince23

    (@vince23)

    https://demos.flesler.com/jquery/serialScroll/js/init.js
    https://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js
    https://flesler-plugins.googlecode.com/files/jquery.localscroll-1.2.7.js

    Thread Starter vince23

    (@vince23)

    So i ve edited my code again.

    According to this tutorial:

    https://www.thewebsqueeze.com/web-design-tutorials/create-a-horizontal-scrolling-website.html

    Here is my header:

    <?php
/**
 * The Header for our theme.
 *
 * Displays all of the <head> section and everything up till <div id="main">
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<meta name="viewport" content="width=device-width" />
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="https://gmpg.org/xfn/11" />

<link href="<?php echo get_stylesheet_directory_uri(); ?>/styles/prettyPhoto.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?php echo get_stylesheet_directory_uri(); ?>/styles/tipsy.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script src="scripts/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="scripts/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'x';
$.localScroll();
});
</script>
<?php // Loads HTML5 JavaScript file to add support for HTML5 elements in older IE versions. ?>
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->
<?php wp_head(); ?>

</head>

<body <?php body_class(); ?>>
<div id="page">
	<header id="masthead" class="site-header" role="banner">
		<hgroup>

		</hgroup>

<div id="logo"><img src="...mylogo.png"></div>
	</header><!-- #masthead -->

	<div id="container">

    I used these JS-Files:

    jquery.min.js (1.3.2)
    jquery.localscroll-min.js
    jquery.scrollTo-min.js

    Its still not working – maybe a conflict with some of the

    standard wordpress JS files ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WordPress & Scroll To Plugin’ is closed to new replies.