How to select class element inside div in jquery

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');
 });

Answers


To select a class element inside your div:

$("div.wsb-htmlsnippet-element").find(".someclass").click(function(event){
 . 
 .
 . 
});

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>

Need Your Help

Check if ValidationSummary is Valid using OnClientClick

asp.net javascript validation upload

Is there a way to check if a ValidationSummary control has its IsValid property set to true using Javascript in the OnClientClick event of a button?