PDA

View Full Version : Stopping jQuery Scroll to Top on click?



Simon Lloyd
10-16-2009, 11:53 AM
Hi all, is there any way to stop this script jQuery Scroll to Top Control v1.1 found here at DD on second click, right now if you click the up arrow it scroll majestically to the top, however if you click it again on its way it then does not hide the arrow and will not allow you to scroll down again unless you click somewhere on the screen.

My question is, is it possible to halt the scroll on click again?, lets say i click to scroll back up and then see a section i would like to stop at i have to scroll back down, but it would be great if you could click the button again and the scroll cancel.

Any ideas?

Regards,
Simon

jscheuer1
10-16-2009, 02:02 PM
In future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

Warning: Please include a link to the DD script in question in your post. See this thread (http://www.dynamicdrive.com/forums/showthread.php?t=6) for the proper posting format when asking a question.

On to your question -

I'm not sure what you mean by:


if you click it again on its way it then does not hide the arrow

I wasn't able to observe that. What exactly do I need to do, and in what browser, to see that happen?

Anyways, adding a second click stop is easy enough. Just replace the existing scrollup:function in the scrolltopcontrol.js file with this one:


scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
if(!this.scrolling){
this.scrolling = true;
this.$body.animate({scrollTop: dest}, this.setting.scrollduration, function(){scrolltotop.scrolling = false;});
} else {
this.scrolling = false;
this.$body.stop();
}
},

Simon Lloyd
10-16-2009, 02:53 PM
Firstly, apologies for posting in the wrong forum :), secondly heres the link http://www.dynamicdrive.com/dynamicindex3/scrolltop.htm

When clicking to scroll up (i have duration set to 6000 and its a long scroll on my site www.thecodecage.com) if i click again (other have experienced the same in bothe IE8 and Firefox) before it reaches the top as if to try and stop the scroll (yeah i know it doesn't) then the button doesn't disappear and if you use your scroll arrows or try to drag the scroll bar down the scroll flicks back to the top and you aren't capable of scrolling down unless you click elsewhere on the screen first (im assuming thats because the target is set but we are already at target (im no coder by any stretch of the imagination)), however i think you may have answered my question with your code, im about to try it.....i wanted a second click to stop the scroll ......will post back and let you know :)

Thanks for replying,

Regards,
Simon

Simon Lloyd
10-16-2009, 03:02 PM
John, that code worked but with one small problem, the button doesnt disappear when it reaches its top target or the top 200 pixels, here's what i have, it may be my fault :(

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.


var scrolltotop={
//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
setting: {startline:350, scrollto: 200, scrollduration:6000, fadeduration:[500, 100]},
controlHTML: '<img src="http://www.thecodecage.com/forumz/Up.png" style="width:48px; height:48px" alt="Gentle scroll back to the top"/>', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

state: {isvisible:false, shouldvisible:false},

scrollup:function(){
if (!this.cssfixedsupport) //if control is positioned using JavaScript
this.$control.css({opacity:0}) //hide control immediately after clicking it
var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
dest=jQuery('#'+dest).offset().top
else
dest=0
if(!this.scrolling){
this.scrolling = true;
this.$body.animate({scrollTop: dest}, this.setting.scrollduration, function(){scrolltotop.scrolling = false;});
} else {
this.scrolling = false;
this.$body.stop();
}
},
keepfixed:function(){
var $window=jQuery(window)
var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
this.$control.css({left:controlx+'px', top:controly+'px'})
},

togglecontrol:function(){
var scrolltop=jQuery(window).scrollTop()
if (!this.cssfixedsupport)
this.keepfixed()
this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
if (this.state.shouldvisible && !this.state.isvisible){
this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
this.state.isvisible=true
}
else if (this.state.shouldvisible==false && this.state.isvisible){
this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
this.state.isvisible=false
}
},

init:function(){
jQuery(document).ready(function($){
var mainobj=scrolltotop
var iebrws=document.all
mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
.attr({title:'Scroll Back to Top'})
.click(function(){mainobj.scrollup(); return false})
.appendTo('body')
if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
mainobj.togglecontrol()
$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
mainobj.scrollup()
return false
})
$(window).bind('scroll resize', function(e){
mainobj.togglecontrol()
})
})
}
}

scrolltotop.init()

Simon Lloyd
10-16-2009, 03:46 PM
In addition to the button remaining visible when the scroll is complete or we are in the last 200 pixels i also get an error on the page now with the new code

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 1.1.4322; InfoPath.2; .NET CLR 3.0.30618; .NET CLR 3.5.30729)
Timestamp: Fri, 16 Oct 2009 15:38:31 UTC

Message: Object doesn't support this property or method
Line: 42
Char: 3
Code: 0
URI: http://www.thecodecage.com/forumz/scrolltopcontrol.js

jscheuer1
10-16-2009, 04:56 PM
Your copy of the script is OK and works fine here in IE 8 and others if used on a valid page with no other scripts. In fact, only IE 8 and 7 (I didn't test any earlier IE versions) seem to have a problem with the live forum page. I'm not really sure what the problem is. Probably some conflict with another script or scripts. IE is also notorious for confusing like named things even when it should know better. The problem line appears to be:


var scrolltop=jQuery(window).scrollTop()

Window here refers to the actual window. So if you have anything else on your page named, or with the id of, or with a class of 'window', IE may be getting confused.

I'd try replacing the word window there with the word document to see if that helps.

Other than that, it would be a process of removing the other scripts from the page one by one if or until the problem goes away. If taking away one of the other scripts fixes it, that is the script that is having the conflict and a solution might then be found. But it could be something else.