Scrollto an element on home page with Custom JS

acceleratedbuysell · January 2015

My web page is at http://rosaluca.wpengine.com/.

I'm trying to figure out how to do scrollto link in an image box. How do you edit id tags of link in an image box?

The reason for this is to create a scrollto an element on the home page so when you click on it, instead of going directly to an element on the home page, it scrolls to the element on the home page. Let me know if you need the log in info to see what changes we've made or custom CSS was used.

Here's what I'm using at this point:

function scrollToAnchor(aid){

var aTag = $("a[name='"+ aid +"']");

$('html,body').animate({scrollTop: aTag.offset().top},'slow');

}

$("#link").click(function() {

scrollToAnchor('id3');

});

where the #link is the id of the link that I'd like to edit, so that I can scroll to different elements or ids.

Thanks
Mark

Albert · January 2015

Hi Mark,

we do not use any JS for that. Please take a look into doc http://themes.muffingroup.com/betheme/documentation/#menu where we explained how to use "One page menu" feature.

acceleratedbuysell · January 2015

Hi, so we have the one page menu activated on the Home Page, and are using the custom ID section of the section we're linking to, but the scroll isn't working on the links we're using. The links are not part of the menu, they're connected to image boxes, will the One Page scroll still work with this?

Albert · January 2015

Please show us what you exactly mean because we are not sure what exactly does not work. We must have a look on it. Please give us example of what you mean.

acceleratedbuysell · January 2015

sure, the site is http://rosaluca.wpengine.com and the links in question are the four icons under RosaLuca's Italian Bistro. Each is supposed to link to different sections of the homepage.

Albert · January 2015

Ok, we see. So if you want to use them with "smooth scroll" feature, you must add class="scroll" for each item.

acceleratedbuysell · January 2015

Ok great, is there an easy way to access these elements individually? I've been using .slide(my custom CSS class for that section).column.one-fourth img { Styles go here } to access them

acceleratedbuysell · January 2015

I'm not seeing a section to add that class to the muffin builder item, should I switch them to visual builder items and then build the item with HTML myself? As they stand they are in image box items.

Albert · January 2015

We already realized that you use "Image" item and this item unfortunately do not have class field. We'll consider this field while future updates. At this moment, this will be possible only when you use html. So unfortunately right now it is not possible to add this class for your elements.

acceleratedbuysell · January 2015

Ok, well then, could you tell me how to animate a HTML element via your theme? I'm guessing that I can rebuild the element pretty precisely with HTML, I'd just need the animation info for the transitions.

Albert · January 2015

Sorry but this is not possible to use just plain html to create theme items. This is not working like that. Unfortunately in your case with current stuff it is completely not possible to add this "scroll" class for the items.

acceleratedbuysell · February 2015

I was able to add the scroll. Here is the web site: http://rosaluca.wpengine.com/

I need to see if you can help me with one more thing. The links on the top of the home page: Our Menu, Specials, Catering, Events & Blog do not link to the top of each element. Can you tell me how I can do that or what I may be doing wrong?

Thanks

Albert · February 2015

But do what? Please explain what you mean with more details because you said "How i can do that" but we don't know what

acceleratedbuysell · February 2015

Ok. I thought I explained it in detail. The links I explained above link to specific elements on the home page. The home page is set up to act like a one page site. I have the links set so when clicked they scroll down to the matching elements on the page. Menu scrolls down to the menu element. Specials scrolls down to the Specials element and so on. My issue is as I have set it up, when they scroll down to each element, I would like the top of the element to scroll and stop at the bottom of the menu that appears after the page starts to scroll. Right now there is a gap of about an inch for each element when the page stops scrolling. I was wondering if you could help me determine what I am doing wrong or need to do to get it to act as I described I would like it to act.

Hopefully that was enough detail. :-)

Mark

Albert · February 2015

We got it now. We did not noticed this behavior before. But you must send us access to FTP on pm because we need to check console log as we don't see anything in current code.

Scrollto an element on home page with Custom JS

Comments