Scrollto an element on home page with Custom JS

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

Comments

  • 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.
  • 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?  
  • 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.
  • 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.
  • Ok, we see. So if you want to use them with "smooth scroll" feature, you must add class="scroll" for each item.
  • 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
  • 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.  
  • 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.
  • 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.  
  • 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.
  • 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
     


  • 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 :)
  • edited 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 
  • 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.
Sign In or Register to comment.