Quantcast
Channel: MyBB Community Forums - Tutorials
Viewing all articles
Browse latest Browse all 685

Smooth Scroll to local anchors - No JQuery needed

$
0
0
You can find many solutions for "Scroll on top" using JQuery. I will show you a way to smoothly scroll to local anchors like #top, #bottom etc.

I`ve found a lttle script that exactly do this for you. Have a look to a demo site: Smooth scrolling demo

The script can be found here: smoothscroll.js

But how can i implement and use this script?

It`s pretty simple to implement and use this script in your mybb forum. Just save the smoothscroll.js to your jscripts folder on your server.

Open your template Ungrouped Templates-->headerinclude and serach for this line:
PHP Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/popup_menu.js?ver=1600"></script> 

After add:
PHP Code:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/smoothscroll.js"></script> 
Save the template and go to your forum index. Now your site is scrolling up very smoothly when you click on "Return to Top" in the bottommenu.

You can add several local anchors if you want. The syntax for creating another local anchor is:
PHP Code:
<a name="anchorname" id="anchorname"></a

For example a local anchor to scroll to the bottom of your forum:
PHP Code:
<a name="bottom" id="bottom"></a

Place a hyperlink wherever you want to scroll to the bottom. The syntax for a link must be like this:
PHP Code:
<a href="#bottom">Scroll to bottom</a

That`s all. Now you have a smooth scrolling effect to all local anchors you create without using JQuery. Smile

Viewing all articles
Browse latest Browse all 685

Latest Images

Trending Articles



Latest Images