All geek questions in one place

Binding to multiple classes instead of id with jquery

I have a page with up and down arrows, which are links that float to the left. I want them to move between divs on the page as scrollable anchor links. Here is what I still ..... I know that jquery is far from complete, but I think I will go in the right direction. Any help would be great.

JSFIDDLE: http://jsfiddle.net/t8uaQ/

HTML:

<ul id="et-float-menu">
   <li class="et-float-menu-item1">
       <a href="#scroll"> <span><img></span> </a>
   </li>
   <li class="et-float-menu-item2">
       <a href="#scroll"> <span><img></span> </a>
   </li>
</ul>     
<div class="jumptosection" id="section1">
   <h2>Section 1</h2>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

   <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section2">
    <h2>Section 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section3">
    <h2>Section 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>    
<div class="jumptosection" id="section4">
    <h2>Section 4</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam dapibus luctus ligula sit amet tincidunt. Aliquam dapibus ipsum ac metus interdum congue. In sed arcu et quam semper tincidunt vel non enim. Ut sit amet volutpat neque. Suspendisse potenti. Vestibulum cursus erat vitae posuere mattis. Integer eleifend eleifend fermentum.</p>

    <p>Curabitur arcu tortor, tincidunt in ante ornare, aliquam pulvinar nunc. Quisque elit erat, suscipit non odio a, fringilla fermentum dui. Aenean ultricies nisi vitae massa fermentum facilisis. Donec dignissim iaculis tortor ultrices dapibus.</p>
</div>

MY CSS:

#section1 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section2 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#section3 {
  padding:20px;
  margin:10px;
  background-color:#f8f8f8;
}

#section4 {
  padding:20px;
  margin:10px;
  background-color:#e8e8e8;
}

#et-float-menu {
  position: fixed;
  z-index: 11;
  left: 0;
  top: 45%;
  background-color: #000;
  padding: 20px 10px 10px 15px;
  margin: 0;
  -webkit-border-top-right-radius: 8px;
  -webkit-border-bottom-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  -moz-border-radius-bottomright: 8px;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

#et-float-menu a {
  padding: 0;
  clear: both;
  float: left;
  margin-bottom: 10px;
  color: #fff;
}

#et-float-menu a:hover { color: #b2b2b2; transition: color 300ms ease 0s; }

#et-float-menu li {
  display: block;
  margin-left: 0;
}


.et-float-menu-item a { display: inline-block; font-size: 24px; position: relative; text-align: center; transition: color 300ms ease 0s; color: #fff; text-decoration: none; }
.et-float-menu-item a:hover { color: #a0a0a0; }
.et-social-icon span { display: none; }
.et-float-menu-item1 a:before { content: '↑';font-size:22px; }
.et-float-menu-item2 a:before { content: '↓';font-size:22px; }

Jquery:

jQuery(document).ready(function(){
var jumptosectionTopPosition = jQuery('.jumptosection').offset().top;
jQuery('#scroll').click(function(){
    jQuery('html, body').animate({scrollTop:jumptosectionTopPosition}, 'slow');
    return false;
});
});
+4
source share
2 answers

Change hrefyours <a>to scrollUpand scrollDownaccordingly.

.selected, . html.

, : .selected div.

function changeSelection(sectionFrom, sectionTo) {
    if(sectionTo.length > 0) {
        sectionFrom.removeClass("selected");
        sectionTo.addClass("selected");
        $("body").animate({scrollTop: sectionTo.offset().top});
    }
}

click anchor s. div div, , changeSelection() div s.

scrollDown div:

$(document).on("click", "[href='#scrollDown']", function(){
    var currentSection = $(".selected");
    var nextSection = currentSection.next(".jumptosection");

    changeSelection(currentSection, nextSection);

    return false;
});

scrollUp div:

$(document).on("click", "[href='#scrollUp']", function(){
    var currentSection = $(".selected");
    var prevSection = currentSection.prev(".jumptosection");

    changeSelection(currentSection, prevSection);

    return false;
});

( .jumptosection div), ( changeSelection - , WeWantScrollTo)

( http://94co.com/client3/about/)

  • . WordPress jQuery. jQuery $ script
  • id href anchor

  • , JavaScript click

    jQuery(document).ready(function(){
     /*scrollUp and scrollDown click listeners should be here*/
});

    (JSFiddle ). changeSelection

+6

var, :

var pre = $('.et-float-menu-item1'),
    nex = $('.et-float-menu-item2'),
    act = $('#section1');

prev next:

nex.click(function(){
    pre.slideDown();
    var gt = act.next('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.next('div');
})
pre.click(function(){
    var gt = act.prev('div').offset().top;
    $('body').animate({scrollTop : gt},'slow');
    act = act.prev('div');
})

, aproach, .

-

+1

Source: https://habr.com/ru/post/1524355/

More articles:


All Articles