HORIZONTAL SCROLLING INTERNAL ANCHOR LINKS CLICK WITH JQUERY

Ankita Pandey

Total Post:183

Points:1285
Posted by  Ankita Pandey
JQuery 
 2425  View(s)
Ratings:
Rate this:
Hi!

I use jquery for horizontal scrolling with mousewheel.It is work ..

 $('html').mousewheel(function (event, delta) {
            this.scrollLeft += (delta * 50);
            event.preventDefault();
        });
I want horizontal scrolling Internal Anchor Links click,

I use this code :

   $(".prevscroll").click(function (event) {
               event.preventDefault();
               $.scrollTo(this.hash, 150, { easing: 'elasout' });
        });
or

  $(window).scrollLeft((Number($(window).scrollLeft()) + 50) + 'px');
or

 $('body').scrollLeft(50);
but don't scrolling !!!!

My html code

<script type='text/javascript' src="js/jquery.mousewheel.min.js"></script>
<script type='text/javascript' src="js/jquery.min.js"></script>
<script type='text/javascript' src="js/jquery.mousewheel.js"></script>
<style>
 .content
 {
padding: 20px 20px 0;
display: block;
z-index: 1;
height: 340px;
position: relative;
}
#contentWrapper
{
position: absolute;
max-width: 100%;
min-width: 400px;
min-height: 350px;
padding: 0 20px 30px 20px;
z-index: 1;
}
</style>


<div style="display: block;top:107px" id="contentWrapper">
  <a class="prevscroll"></a>
   <div style="margin-right: 0px;" id="content">
    //My content
   </div>
</div>
  1. AVADHESH PATEL

    Post:604

    Points:4228
    Re: Horizontal scrolling Internal Anchor Links click with jquery

    Hi Ankita!

    Bind mousewheel function with body and replace -= to +=

    $(function() {

        $("body").mousewheel(function(event, delta) {
            var $this = $(this);

            this.scrollLeft -= (delta) * 50;
            event.preventDefault();
        });
    });

    I hope it helpful you!

  1. Vijay Shukla

    Post:100

    Points:700
    Re: Horizontal scrolling Internal Anchor Links click with jquery

    Hi!

    You can try as following

    $(".prevscroll").click(function (event) {
                $('html, body').scrollLeft($('html, body').scrollLeft()+150);
                  event.preventDefault();
            });

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!