Smooth page scrolling between internal anchors

classic Classic list List threaded Threaded
16 messages Options
Reply | Threaded
Open this post in threaded view
|

Smooth page scrolling between internal anchors

[-Stash-]
Hi,

I'm very new to both jQuery and Javascript, but I love what it can do so far.  I'd like to be able to create a plugin that enables smooth scrolling when you click on an internal anchor link on a page.  It would be beneficial to users as it provides feedback that you are not going to a different page, but somewhere else on the page.

I've found a snippet of code that implies it should do the trick, but I can't get it to work successfully.  If anyone could start pointing me in the right direction I would greatly appreciate it.

Many thanks,

Luke

Code snippet:
----------------------------------------------
$('a[@href^="#"]').each(function(i){
$(this).click(function(){
$(this.href).ScrollTo(2000);
return false;
});
});
----------------------------------------------
http://techfoolery.com/archives/2006/08/11/2021/?PHPSESSID=784f3aa2dd287a7ce685852ff5d7ff9a#comment-4
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

DavidIcreate
[-Stash-] schreef:

> Code snippet:
> ----------------------------------------------
> $('a[@href^="#"]').each(function(i){
> $(this).click(function(){
> $(this.href).ScrollTo(2000);
> return false;
> });
> });
> ----------------------------------------------
> http://techfoolery.com/archives/2006/08/11/2021/?PHPSESSID=784f3aa2dd287a7ce685852ff5d7ff9a#comment-4
>  
That is the scrollto function of the interface plugin:
http://interface.eyecon.ro/docs/fx you can download it there too.

--
David Duymelinck
________________
[hidden email]


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

Stefan Petre
David Duymelinck wrote:

> [-Stash-] schreef:
>  
>> Code snippet:
>> ----------------------------------------------
>> $('a[@href^="#"]').each(function(i){
>> $(this).click(function(){
>> $(this.href).ScrollTo(2000);
>> return false;
>> });
>> });
>> ----------------------------------------------
>> http://techfoolery.com/archives/2006/08/11/2021/?PHPSESSID=784f3aa2dd287a7ce685852ff5d7ff9a#comment-4
>>  
>>    
> That is the scrollto function of the interface plugin:
> http://interface.eyecon.ro/docs/fx you can download it there too.
>
>  
I made this a plugin. $(document).ScrollToAnchors(500);

This will make all the a href=#anchor to animate to the element. Will be
released when jQuery 1.1 is released.

_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

DavidIcreate
Stefan Petre schreef:
> I made this a plugin. $(document).ScrollToAnchors(500);
>
> This will make all the a href=#anchor to animate to the element. Will be
> released when jQuery 1.1 is released.
>  
Nice. but wouldn't it be better  to use  a name="anchor"? Anchors don't
need href .

Are there more changes in the to be released interface? or do you keep
them under the hat to surprise everybody :)

--
David Duymelinck
________________
[hidden email]


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by DavidIcreate
Thanks for that, it'll help me with fine tuning it, however, it still
doesn't work with all the internal anchors on the page.  Is all the code
correct to do that?  Is the rest of my plugin what's gone wrong (as I
said, very new to JS)?

Thanks for the quick reply :)

Luke

David Duymelinck wrote:

> [-Stash-] schreef:
>  
>> Code snippet:
>> ----------------------------------------------
>> $('a[@href^="#"]').each(function(i){
>> $(this).click(function(){
>> $(this.href).ScrollTo(2000);
>> return false;
>> });
>> });
>> ----------------------------------------------
>> http://techfoolery.com/archives/2006/08/11/2021/?PHPSESSID=784f3aa2dd287a7ce685852ff5d7ff9a#comment-4
>>    
> That is the scrollto function of the interface plugin:
> http://interface.eyecon.ro/docs/fx you can download it there too.

_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

Stefan Petre
In reply to this post by DavidIcreate
David Duymelinck wrote:

> Stefan Petre schreef:
>  
>> I made this a plugin. $(document).ScrollToAnchors(500);
>>
>> This will make all the a href=#anchor to animate to the element. Will be
>> released when jQuery 1.1 is released.
>>  
>>    
> Nice. but wouldn't it be better  to use  a name="anchor"? Anchors don't
> need href .
>
> Are there more changes in the to be released interface? or do you keep
> them under the hat to surprise everybody :)
>
>  
<a name="ancor"> will not trigger the scroll. a link to it will trigger
the scroll.

There quite a few new things in interface.

_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by Stefan Petre
Stefan Petre wrote
David Duymelinck wrote:

I made this a plugin. $(document).ScrollToAnchors(500);

This will make all the a href=#anchor to animate to the element. Will be
released when jQuery 1.1 is released.
Does it work with 1.1a?  If so would you be willing to give me a sneak peek? :)
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

DavidIcreate
In reply to this post by [-Stash-]

>> [-Stash-] schreef:
>>  
>>    
>>> Code snippet:
>>> ----------------------------------------------
>>> $('a[@href^="#"]').each(function(i){
>>> $(this).click(function(){
>>> $(this.href).ScrollTo(2000);
>>> return false;
>>> });
>>> });
>>> ----------------------------------------------
>>> http://techfoolery.com/archives/2006/08/11/2021/?PHPSESSID=784f3aa2dd287a7ce685852ff5d7ff9a#comment-4
>>>    
>>>      
i think you have to do

$('a[@href^="#"]').each(function(i){
$(this).click(function(){
if($(this).next('a[@href^="#"]').size() == 1){ // check if there is a innerlink further on the page
        $(this).next().ScrollTo(2000);
        return false;
}else{
$('a[@href^="#"]')[0].ScrollTo(2000); // go to the first innerlink
return false;
}
});
});

i don't know if it works but it can be a step in the right direction


--
David Duymelinck
________________
[hidden email]


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

Stefan Petre
In reply to this post by [-Stash-]
[-Stash-] wrote:

> Stefan Petre wrote:
>  
>> David Duymelinck wrote:
>>
>> I made this a plugin. $(document).ScrollToAnchors(500);
>>
>> This will make all the a href=#anchor to animate to the element. Will be
>> released when jQuery 1.1 is released.
>>    
>
> Does it work with 1.1a?  If so would you be willing to give me a sneak peek?
> :)
>  
You can take it out from SVN

_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by Stefan Petre

Many thanks to Stefan for helping me with this off list.

If anyone else wants to get this working with a single external file, so your header has something like this in it:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="interface.js"></script>
<script type="text/javascript" src="ScrollToAnchors.js"></script>

ScrollToAnchors.js should contain the following:

$(document).ready(
   function()
   {
      $(document).ScrollToAnchors(630);
   }
);

Change the ScrollToAnchors() value to whatever you like. Higher number -> slower scrolling.

I have a problem with it though. Scrolling between anchors on the same page works perfectly, but when trying to go to another page, the links don't work at all! The Top of Page and Bottom of Page links on this page work as expected, but if I try clicking on any of the discussion links on the main discussions page nothing happens!

I realise that I could specify exactly which anchors I would like the plugin to work for, but I would rather it would just work as expected by default. What would I need to change to get these links to other pages to work properly?

P.S. please feel free to sign up to the forums if you want to test things out, it's just a general testing zone for me.

Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

Stefan Petre
It is a bug. I will fix it.


[-Stash-] wrote:

> Many thanks to Stefan for helping me with this off list.
>
>
> If anyone else wants to get this working with a single external file, so
> your header has something like this in it:
>
>
> &lt;script type="text/javascript" src="jquery.js">&lt;/script>
> &lt;script type="text/javascript" src="interface.js">&lt;/script>
> &lt;script type="text/javascript" src="ScrollToAnchors.js">&lt;/script>
>
>
> ScrollToAnchors.js should contain the following:
>
>
> $(document).ready(
>    function()
>    {
>       $(document).ScrollToAnchors(630);
>    }
> );
>
> Change the ScrollToAnchors() value to whatever you like.  Higher number ->
> slower scrolling.
>
>
> I have a problem with it though.  Scrolling between anchors on the same page
> works perfectly, but when trying to go to another page, the links don't work
> at all!  The Top of Page and Bottom of Page links on
> http://exhibitq.com/talk/comments.php?DiscussionID=3&page=1 this page  work
> as expected, but if I try clicking on any of  http://exhibitq.com/talk/ the
> discussion links on the main discussions page  nothing happens!
>
>
> I realise that I could specify exactly which anchors I would like the plugin
> to work for, but I would rather it would just work as expected by default.
> What would I need to change to get these links to other pages to work
> properly?
>
>
> P.S. please feel free to sign up to the forums if you want to test things
> out, it's just a general testing zone for me.
>
>  


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

Karl Swedberg-2
In reply to this post by [-Stash-]
I was planning to post this at learningjquery.com eventually, but since you asked...

Here is what I do to apply the ScrollTo() feature of Interface to only same-page links. Note that I have it look only inside #main-content, but you can remove or replace that. By the way, I had to start with a[@href*="#"], using the asterisk, because IE always uses the fully-qualified URL (so we can't just find "#" at the beginning).


// smooth scrolling for all same-page links *wrap this in a $(document).ready(function{});
 
  var docHashIndex = location.href.indexOf("#");
  if (docHashIndex != -1) {
    var docURL = location.href.slice(0,docHashIndex);
  }
  else {
    var docURL = location.href;
  }

  $('#main-content a[@href*="#"]').click(function() {
    var $linkHref = $(this).href();
    var linkHashIndex = $linkHref.indexOf('#');
    var linkURL = $linkHref.slice(0,linkHashIndex);
    var linkHash = $linkHref.slice(linkHashIndex);

    if (docURL == linkURL) {
      if ($(linkHash).length > 0 ) {
        $(linkHash).ScrollTo(400);  
        return false;  
      } else {
        $linkDest = $("[@name=" + linkHash.slice(1) +']');
        if ($linkDest.length > 0) {
          $linkDest.ScrollTo(400);
          return false;
        }
      }
    }
  });



--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 18, 2007, at 6:59 AM, [-Stash-] wrote:


Many thanks to Stefan for helping me with this off list.


If anyone else wants to get this working with a single external file, so
your header has something like this in it:


&lt;script type="text/javascript" src="jquery.js">&lt;/script>
&lt;script type="text/javascript" src="interface.js">&lt;/script>
&lt;script type="text/javascript" src="ScrollToAnchors.js">&lt;/script>


ScrollToAnchors.js should contain the following:


$(document).ready(
   function()
   {
      $(document).ScrollToAnchors(630);
   }
);

Change the ScrollToAnchors() value to whatever you like.  Higher number ->
slower scrolling.


I have a problem with it though.  Scrolling between anchors on the same page
works perfectly, but when trying to go to another page, the links don't work
at all!  The Top of Page and Bottom of Page links on 
as expected, but if I try clicking on any of  http://exhibitq.com/talk/ the
discussion links on the main discussions page  nothing happens!


I realise that I could specify exactly which anchors I would like the plugin
to work for, but I would rather it would just work as expected by default. 
What would I need to change to get these links to other pages to work
properly?


P.S. please feel free to sign up to the forums if you want to test things
out, it's just a general testing zone for me.


_______________________________________________
jQuery mailing list
[hidden email]
http://jquery.com/discuss/
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
Thanks Karl, that works perfectly.  I'm still looking forward to the official bug-fix, but this will tide me over great in the mean time :)

Karl Swedberg-2 wrote
I was planning to post this at learningjquery.com eventually, but  
since you asked...

Here is what I do to apply the ScrollTo() feature of Interface to  
only same-page links. Note that I have it look only inside #main-
content, but you can remove or replace that. By the way, I had to  
start with a[@href*="#"], using the asterisk, because IE always uses  
the fully-qualified URL (so we can't just find "#" at the beginning).

// smooth scrolling for all same-page links *wrap this in a $
(document).ready(function{});

   var docHashIndex = location.href.indexOf("#");
   if (docHashIndex != -1) {
     var docURL = location.href.slice(0,docHashIndex);
   }
   else {
     var docURL = location.href;
   }

   $('#main-content a[@href*="#"]').click(function() {
     var $linkHref = $(this).href();
     var linkHashIndex = $linkHref.indexOf('#');
     var linkURL = $linkHref.slice(0,linkHashIndex);
     var linkHash = $linkHref.slice(linkHashIndex);

     if (docURL == linkURL) {
       if ($(linkHash).length > 0 ) {
         $(linkHash).ScrollTo(400);
         return false;
       } else {
         $linkDest = $("[@name=" + linkHash.slice(1) +']');
         if ($linkDest.length > 0) {
           $linkDest.ScrollTo(400);
           return false;
         }
       }
     }
   });



--Karl
_________________
Karl Swedberg
www.englishrules.com
www.learningjquery.com



On Jan 18, 2007, at 6:59 AM, [-Stash-] wrote:

>
> Many thanks to Stefan for helping me with this off list.
>
>
> If anyone else wants to get this working with a single external  
> file, so
> your header has something like this in it:
>
>
> <script type="text/javascript" src="jquery.js"></script>
> <script type="text/javascript" src="interface.js"></script>
> <script type="text/javascript" src="ScrollToAnchors.js"></
> script>
>
>
> ScrollToAnchors.js should contain the following:
>
>
> $(document).ready(
>    function()
>    {
>       $(document).ScrollToAnchors(630);
>    }
> );
>
> Change the ScrollToAnchors() value to whatever you like.  Higher  
> number ->
> slower scrolling.
>
>
> I have a problem with it though.  Scrolling between anchors on the  
> same page
> works perfectly, but when trying to go to another page, the links  
> don't work
> at all!  The Top of Page and Bottom of Page links on
> http://exhibitq.com/talk/comments.php?DiscussionID=3&page=1 this  
> page  work
> as expected, but if I try clicking on any of  http://exhibitq.com/ 
> talk/ the
> discussion links on the main discussions page  nothing happens!
>
>
> I realise that I could specify exactly which anchors I would like  
> the plugin
> to work for, but I would rather it would just work as expected by  
> default.
> What would I need to change to get these links to other pages to work
> properly?
>
>
> P.S. please feel free to sign up to the forums if you want to test  
> things
> out, it's just a general testing zone for me.


_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/


Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by Karl Swedberg-2
Karl Swedberg-2 wrote
I was planning to post this at learningjquery.com eventually, but  
since you asked...

Here is what I do to apply the ScrollTo() feature of Interface to  
only same-page links.
OK, so I've found a strangeness.  It might be in my implementation of your code, but it might not.

http://exhibitq.com/talk/comments.php?DiscussionID=1&page=1

Clicking on "Bottom of Page" does not take you all the way down to the bottom of the page (where #pgbottom is).  However, if you manually now scroll back up to the "Bottom of Page" being careful NOT to go right to the top of the screen (leave a little bit of the very top hidden) and click the link, it does what you would expect!

All the other internal links on that page do what you'd expect.

Thanks,

Luke
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by Stefan Petre
I don't suppose this got fixed in Interface 1.1.2 did it?

Stefan Petre wrote
It is a bug. I will fix it.

[-Stash-] wrote:
> I have a problem with it though.  Scrolling between anchors on the same page
> works perfectly, but when trying to go to another page, the links don't work
> at all!
Reply | Threaded
Open this post in threaded view
|

Re: Smooth page scrolling between internal anchors

[-Stash-]
In reply to this post by Stefan Petre

I've just tested it at http://exhibitq.com/talk/discussion/1/html-test/#Comment_5 and it's still not working.

Basically, that internal link and the "Top of Page" and "Bottom of Page" links work exactly as expected. However, if you then click on the "Discussions" tab at the top of the page and try clicking on the "Attachments 2 + plugins" discussion, nothing happens :(

Please will you give a shout here when then bug's fixed Stefan? I'm eager to get this thing going :)

Thanks,

Luke

Stefan Petre wrote
It is a bug. I will fix it.

[-Stash-] wrote:
> I have a problem with it though. Scrolling between anchors on the same page
> works perfectly, but when trying to go to another page, the links don't work
> at all! The Top of Page and Bottom of Page links on
> http://exhibitq.com/talk/comments.php?DiscussionID=3&page=1 this page work
> as expected, but if I try clicking on any of http://exhibitq.com/talk/ the
> discussion links on the main discussions page nothing happens!