Results 1 to 6 of 6

Thread: Stopping jQuery Scroll to Top on click?

  1. #1
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Stopping jQuery Scroll to Top on click?

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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 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:

    Code:
    	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();
    		}
    	},
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Simon Lloyd (10-16-2009)

  4. #3
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  5. #4
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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
    Code:
    //** 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()

  6. #5
    Join Date
    Oct 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,190 Times in 3,154 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •