Joomla Templates Club 406,261 posts

[ozzymanson2 Friend ozzymanson2Join date: September 2012Posts: 75Downloads:0Uploads:2 Thanks: 6 Thanked: 4 times in 1 posts]

#183108

is there any tasks to add “BACK TO TOP” button? like in the picture

---

Attachments:

1. 

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#476326

Here’s a Scroll Back To Top Plugin you might try.

Here’s another Scroll Back To Top Extension as well.

[ozzymanson2 Friend ozzymanson2Join date: September 2012Posts: 75Downloads:0Uploads:2 Thanks: 6 Thanked: 4 times in 1 posts]

#476335

<em>@TomC 350702 wrote:</em><blockquote>Here’s a Scroll Back To Top Plugin you might try.

Here’s another Scroll Back To Top Extension as well.</blockquote>

the links link to the same stuff. wich doesn’t work with K2 or ja wall or something else

[TomC Moderator TomCJoin date: October 2014Posts: 14077Downloads:58Uploads:137 Thanks: 948 Thanked: 3155 times in 2495 posts]

#476337

<em>@ozzymanson2 350717 wrote:</em><blockquote>the links link to the same stuff. wich doesn’t work with K2 or ja wall or something else</blockquote>
That’s odd – considering that both are elements within a Joomla site structure – as is the extension/plugin.

What was the error when you tried installing/implementing the plugin?

[ozzymanson2 Friend ozzymanson2Join date: September 2012Posts: 75Downloads:0Uploads:2 Thanks: 6 Thanked: 4 times in 1 posts]

#476338

<em>@TomC 350720 wrote:</em><blockquote>That’s odd – considering that both are elements within a Joomla site structure – as is the extension/plugin.

What was the error when you tried installing/implementing the plugin?</blockquote>

nothing has happened

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#476523

Hi ozzymanson2,

It is easy to create a scroll to top function.

1. Open templatesja_walljsscript.js and add this block code below at line 640 (just before enclose the funciton)

$('<a href="" class="backtotop" title=""></a>').appendTo(document.body).on('click', function () {
$('html, body').stop(true).animate({ scrollTop:0 }, 1000);
return false;
});


2. Open templatesja_wallcsstemplate.css and add this block css to the bottom of file.

a.backtotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
display: block;
background: url(' .. arrow image here ') white 0 0 no-repeat;
z-index: 99999;
}


Now try to get a cool image style the button in the way you like.

Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. JA Developer

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#476649

Hi Wall Crasher,

What could be the code to achieve the same look and feel of the “Scroll to Top” button found on the bottom right hand corner of Pinterest.com ?

Thanks!

[ozzymanson2 Friend ozzymanson2Join date: September 2012Posts: 75Downloads:0Uploads:2 Thanks: 6 Thanked: 4 times in 1 posts]

#476680

<em>@Wall Crasher 350968 wrote:</em><blockquote>Hi ozzymanson2,

It is easy to create a scroll to top function.

1. Open templatesja_walljsscript.js and add this block code below at line 640 (just before enclose the funciton)

$('<a href="" class="backtotop" title=""></a>').appendTo(document.body).on('click', function () {
$('html, body').stop(true).animate({ scrollTop:0 }, 1000);
return false;
});


2. Open templatesja_wallcsstemplate.css and add this block css to the bottom of file.

a.backtotop {
position: fixed;
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
display: block;
background: url(' .. arrow image here ') white 0 0 no-repeat;
z-index: 99999;
}


Now try to get a cool image style the button in the way you like.

Hope it helps.

Regards</blockquote>

i haven’t 640 and even 540 line at templatesja_walljsscript.js http://gyazo.com/955b163bfa7e2389f32eed71d22bb22e

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#476717

Hi ozzymanson2,

I am sorry, it seem you have an old version of JA Wall.
According to your picture, you can put the javascript code at line 525. 🙂
just before enclose the function. :laugh:

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477316

Hi Wall Crasher,

I inserted the two sets of code, but there seems to be no effect at http://173.254.15.37/

Thoughts?

By the way I also did not have line 640 in script.js and I am on version 1.05 right now…

thanks

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477343

Hi seaneo,

As I can see in your site, you should move the new block code to line 525 just right before “});” as I said above.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477413

Thanks Wallcrasher – sorry for not following exact instructions – syntax exactness is a beaeacch, ins’t it?:)

Okay it working…and now I have a graphic to use..

What is the exact syntax to insert for the custom graphic?

in your example, you posted:

background: url(‘ .. arrow image here ‘) white 0 0 no-repeat;

so..if my custom graphic is at

/public_html/images/stories/site/customgraphic.jpg

What would be the exact syntax?

Many thanks

[Wall Crasher Developer Wall CrasherJoin date: December 2011Posts: 1113Downloads:0Uploads:15 Thanks: 66 Thanked: 361 times in 300 posts]

#477448

Hi seaneo,

You should add your new image to templatesja_wallimages
And just refer back using relative url.
It should be “background: url(../images/customgraphic.jpg) white 0 0 no-repeat;”

Hope it helps.

Regards

1 user says Thank You to Wall Crasher for this useful post

1. seaneo

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477503

Got it working like a champ – thank you.

How can I make this graphic not appear until the user scrolls a little bit down the page, perhaps after scrolling down 300 pixles or so?

Thanks

[seaneo Friend seaneoJoin date: December 2009Posts: 421Downloads:4Uploads:49 Thanks: 244 Thanked: 12 times in 1 posts]

#477504

also, what could be the methodology to have a different graphic show up on the Spanish side of the site? gracias

[Author]

Posts