Response title
This is preview!
JQuery Smooth scroll not working! (with 3 different methods
in Using jQuery
•
12 years ago
Hi there guys, im new to the forum
Sorry if its a bit lengthy but I desperately need some aid (gotta finish the site by tomorrow
I have been trying to get this JQuery smooth scroll to work for virtually the whole day but haven't had much luck. I basically have a div section labelled with the id "#topoffooter" and I want to click an image on the navbar so that the window would scroll down smoothly as appropriate. I have tried the following:
1st Method:
I put the following in the head section:
with both "jquery-1.2.6.js" and "interface.js" in the head section and putting onclick="$.fn.scroller()" in the img tag (this method came from here: "http://snipplr.com/view/5988/jquery-smotth-scroll-to-anchor-links/")
2nd Method:
I put the following into the head section:
with "jquery-1.2.6.js" in the head section and i gave the image that was being clicked an ID of "scrollbutton"
3rd Method:
I put the following into the head section (also tried in the body just to see):
with "jquery-1.2.6.js" in the head section and putting onclick="scrollWin()" in the img tag (this method came from here: "http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery/")
None of these worked, I would click the button but nothing would happen, my head section looks like this without anything to do with the scrolling effect in it:
As you can see, the stepcarousel viewer and lightbox are using jquery and i have a little rollover function in there as well (ill clean it all up once i have got everything functioning correctly) which does not use JQuery.
I would really appreciate it if someone could help out because i am truly lost and my javascript knowledge is very limited, any questions please ask.
Thanks a lot guys
Sorry if its a bit lengthy but I desperately need some aid (gotta finish the site by tomorrow
I have been trying to get this JQuery smooth scroll to work for virtually the whole day but haven't had much luck. I basically have a div section labelled with the id "#topoffooter" and I want to click an image on the navbar so that the window would scroll down smoothly as appropriate. I have tried the following:
1st Method:
I put the following in the head section:
$.fn.scroller = function() {
var speed = 'slow'; // Choose default speed
$(this).each(function() {
$(this).bind('click', function() {
var target = $(this).attr('#topoffooter'); // Get scroll target
$(target).ScrollTo(speed);
return false;
});
});
}
with both "jquery-1.2.6.js" and "interface.js" in the head section and putting onclick="$.fn.scroller()" in the img tag (this method came from here: "http://snipplr.com/view/5988/jquery-smotth-scroll-to-anchor-links/")
2nd Method:
I put the following into the head section:
$(document).ready(function() {
$('#scrollbutton').click(function() {
var divOffset = $('#header').offset().top;
var pOffset = $('#topoffooter)').offset().top;
var pScroll = pOffset - divOffset;
$('html,body').animate({scrollTop: '+=' + pScroll + 'px'}, 1000, 'bounceout');
});
});
with "jquery-1.2.6.js" in the head section and i gave the image that was being clicked an ID of "scrollbutton"
3rd Method:
I put the following into the head section (also tried in the body just to see):
function scrollWin(){
$('html, body').animate({
scrollTop: $("#topoffooter").offset().top
}, 2000);
}
with "jquery-1.2.6.js" in the head section and putting onclick="scrollWin()" in the img tag (this method came from here: "http://blog.freelancer-id.com/index.php/2009/03/26/scroll-window-smoothly-in-jquery/")
None of these worked, I would click the button but nothing would happen, my head section looks like this without anything to do with the scrolling effect in it:
<head>
<link rel="stylesheet" type="text/css" href="formatting.css" />
<link rel="stylesheet" type="text/css" href="type.css" />
<link rel="stylesheet" href="dd-formmailer.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="jquery-1.2.6.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="js/lightbox.js"></script>
<script type="text/javascript" src="stepcarousel.js">
/***********************************************
* Step Carousel Viewer script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
<style type="text/css">
.stepcarousel{
position: relative; /*leave this value alone*/
border: 0;
overflow: scroll; /*leave this value alone*/
width: 892px; /*Width of Carousel Viewer itself*/
height: 294px; /*Height should enough to fit largest content's height*/
left: 6px;
}
.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 6px;
width: 890px;
}
.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0; /*margin around each panel*/
width: 892px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}
</style>
<script type="text/javascript">
var revert = new Array();
var inames = new Array('home', 'about', 'services', 'portfolio', 'quote', 'contact');
// Preload
if (document.images) {
var flipped = new Array();
for(i=0; i<inames.length; i++) {
flipped[i] = new Image();
flipped[i].src = inames[i]+"2.png";
}
}
function over(num) {
if(document.images) {
revert[num] = document.images[inames[num]].src;
document.images[inames[num]].src = flipped[num].src;
}
}
function out(num) {
if(document.images) document.images[inames[num]].src = revert[num];
}
</script>
</head>
As you can see, the stepcarousel viewer and lightbox are using jquery and i have a little rollover function in there as well (ill clean it all up once i have got everything functioning correctly) which does not use JQuery.
I would really appreciate it if someone could help out because i am truly lost and my javascript knowledge is very limited, any questions please ask.
Thanks a lot guys
1