This project is archived and is in readonly mode.

#15 ✓resolved
Thomas Aylott

Patch to unbreak the back button when using SmoothScroll

Reported by Thomas Aylott | May 28th, 2008 @ 10:00 AM

Originally posted on Trac by Steffen

Original Trac Ticket

Description

Currently when using SmoothScroll? you cannot use your browser´s back button to go back to your previous scroll position in the document. I´ve fixed this with the following patch. It fools the browser by temporarily changing the target´s id so that the browser cannot scroll jump to the target on its own, _but_correctly remembers the current scroll position so that you can use the back button.

I agree that this solution is not very elegant, but it solves this bug and even if you don´t apply it maybe it can serve as an inspiration.

--- mootools-debug.js      2007-08-11 20:24:23.000000000 +0200
+++ mootools-debug.js      2007-08-11 20:24:24.000000000 +0200
@@ -6549,16 +6549,17 @@
                        var anchor = link.href.substr(location.length);
                        if (anchor && $(anchor)) this.useLink(link, anchor);
                }, this);
-               if (!window.webkit419) this.addEvent('onComplete', function(){
-                       window.location.hash = this.anchor;
-               });
        },
 
        useLink: function(link, anchor){
-               link.addEvent('click', function(event){
+               link.addEvent('click', function(){
                        this.anchor = anchor;
                        this.toElement(anchor);
-                       event.stop();
+                       var anchor_el = $(anchor);
+                       anchor_el.id += '_';
+                       window.setTimeout(function(){
+                               anchor_el.id = anchor;
+                       }, 0);
                }.bindWithEvent(this));
        }

Trac Attachments

Trac Comments

Changed 9 months ago by ibolmo


        
Will be considered for 1.3's Plugin enhancements and move. 

                  Changed 9 months ago by ibolmo

          milestone
              changed from Mootools version 1.2 to Mootools version 1.3

Will be considered for 1.3's Plugin enhancements and move. 

          milestone
              changed from Mootools version 1.2 to Mootools version 1.3
        
      

Changed 2 weeks ago by tomocchino



                  Changed 2 weeks ago by tomocchino

          owner
            deleted
        
          component
              set to Core
        
          milestone
              set to Mootools version 1.3

          owner
            deleted
        
          component
              set to Core
        
          milestone
              set to Mootools version 1.3
        
      

Comments and changes to this ticket

  • Tom Occhino

    Tom Occhino September 21st, 2008 @ 05:01 PM

    • State changed from “new” to “open”
    • Tag set to core, defect, minor, patch
  • adamnfish

    adamnfish November 6th, 2008 @ 03:47 AM

    • Tag changed from core, defect, minor, patch to defect, patch

    That's great Thomas, but it depends on the anchor having an id as well as a name which certainly can't be depended on. A minor tweak will get it working properly even if the id isn't there:

    
    this.Scroll = new Class({
    
    	Extends: Fx.Scroll,
    
    	initialize: function(options, context){
    		context = context || document;
    		this.doc = context.getDocument(), win = context.getWindow();
    		this.parent(this.doc, options);
    		this.links = this.options.links ? $$(this.options.links) : $$(this.doc.links);
    		var location = win.location.href.match(/^[^#]*/)[0] + '#';
    		this.links.each(function(link){
    			if (link.href.indexOf(location) != 0) {return;}
    			var anchor = link.href.substr(location.length);
    			if (anchor && this.doc.getElement("a[name=" + anchor + "]")) {this.useLink(link, anchor);}
    		}, this);
    	},
    
    	useLink: function(link, anchor){
    		console.log(link, anchor);
    		link.addEvent('click', function(event){
    			event.preventDefault();
    			this.anchor = anchor;
    			var anchor_el = this.doc.getElement("a[name=" + anchor + "]");
    			this.toElement(anchor_el);
    			anchor_el.id += '_';
    			window.setTimeout(function(){
    				anchor_el.id = anchor;
    			}, 0);
    			link.blur();
    		}.bind(this));
    	}
    
    });
    
  • adamnfish

    adamnfish November 6th, 2008 @ 03:52 AM

    Sorry - I left the console.log in there.

    *shame

    Ignore the "this.scroll =" bit as well, of course. I just copied the code from a project I'm working on.

  • Aaron Newton

    Aaron Newton February 18th, 2009 @ 11:52 PM

    • Assigned user changed from “Valerio” to “Aaron Newton”
    • Milestone cleared.
  • Aaron Newton

    Aaron Newton February 19th, 2009 @ 12:07 AM

    • State changed from “open” to “resolved”

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins

Tags

Referenced by

Pages