2

I am trying to implement the smooth scrolling effect described here jquery smooth scroll to an anchor? using Godaddy's Website builder tool. Unfortunately the tool adds lots of its own boiler-plate code and my own markup ends up inside it. It seems therefore that the jquery script is never called and instead of the smooth scroll effect, I have the usual "jump" to the target section.

The tool-generated markup is as follows, where the external div element has been added and "wraps" my own markup (anchor element):

<div class="wsb-htmlsnippet-element"><a class="scroll" href="#things">Supported Things</a></div>

In a simular way the target element id is also enclosed in a div:

<div class="wsb-htmlsnippet-element"><section id="things"><h2>Supported Things</h2></section></div>

How should I modify the original script, which is reproduced below in order to make it work no matter how much additional divs (or other elements) the Website builder tool uses to wrap my own custom markup?

$(".scroll").click(function(event){
   event.preventDefault();
   //calculate destination place
     var dest=0;
     if($(this.hash).offset().top > $(document).height()-$(window).height()){
          dest=$(document).height()-$(window).height();
     }else{
          dest=$(this.hash).offset().top;
     }
     //go to destination
     $('html,body').animate({scrollTop:dest}, 1000,'swing');
 });
Community
  • 1
  • 1
BigONotation
  • 4,406
  • 5
  • 43
  • 72
  • I'm not sure but I think you can try delegated event handler: `$(document).on("click", ".scroll", function (event){`. It could be that the tool does something that creates your element dynamically to be wrapped inside a div – Khanh TO May 10 '15 at 08:46

2 Answers2

1

To select a class element inside your div: 

$("div.wsb-htmlsnippet-element").find(".someclass").click(function(event){
 . 
 .
 . 
});
Ashesh
  • 3,499
  • 1
  • 27
  • 44
-1

As far as I can see, your script already works no matter how many elements wrap around your anchor.

Edit: Thanks for the downvote, I am correct though: https://jsfiddle.net/wfvjus0h/

<div class="whatever"><div class="ok">
<div class="wsb-htmlsnippet-element"><a class="scroll" href="#things">Supported Things</a></div>
    </div></div>

<div class="longdiv">aeaeaeae</div>

<div class="wrapper1""><div class="wrapper2"><div id="things">Things</div></div></div>
keewnn
  • 600
  • 3
  • 8