Jquery плавная прокрутка (не привязка)

Question

Я видел пару статей здесь, но я просто не могу найти правильный ответ. Я не ищу для плавной прокрутки в точке крепления, я уже получил, что я ищу для плавной прокрутки, как это или это. так или иначе они оба используют этот jquery, который я не знаю, как реализовать.

Я пробовал это: проще-плавной прокрутки. Но на самом деле это не так гладко, когда вы быстро прокручиваете, это замедляет вас.

Я также попробовал: простой гладкий руль. Но я не смог реализовать это должным образом, так как мой рост установлен на 100%, кто-то еще жаловался на это также на github. Кроме того, демонстрация, представленная в Download (не на github), не сработала для меня, попыталась исправить эту демонстрацию, но все равно не повезло.

Я также пытаюсь использовать источник этого: гладкое колесо. Тем не менее, я не волшебник javascript с javascript, поэтому, я не могу этого сделать.

Вот простая у меня страница jsfiddle, где она должна работать: jsfiddle

 <div id="menubar">
        <a href="#welcome">Welcome</a><a href="#welcome">Welcome</a><a href="#welcome">Welcome</a><a href="#welcome">Welcome</a>
    </div>
    <div id="container">
        <div id="content">
                <br />
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a tortor fringilla, volutpat justo malesuada, suscipit justo. Fusce ante dui, bibendum non sapien vitae, hendrerit ultricies enim. Quisque dictum fermentum congue. Vestibulum posuere iaculis arcu, ultrices pharetra mauris ultrices finibus. Ut pulvinar sit amet justo et rhoncus. Maecenas id ante vel tortor vulputate commodo in in lacus. Nunc auctor vulputate ornare. Donec lacus odio, maximus ut massa a, finibus pulvinar justo. In facilisis quam sed pharetra aliquet. Etiam varius non eros non suscipit. Vestibulum venenatis placerat accumsan. Nulla nec consequat mauris. Etiam nisl magna, semper vel sem mollis, vehicula bibendum urna. Nunc porttitor dui sed volutpat imperdiet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pharetra ligula sit amet sapien mollis malesuada.

Sed mollis convallis risus. Duis volutpat, diam rutrum pretium scelerisque, odio nunc faucibus odio, sit amet cursus justo justo ac mi. Aenean laoreet et eros non viverra. Praesent id erat vel nisl molestie pharetra. Pellentesque eu eros nibh. Aliquam mollis, tortor eget consequat varius, metus sapien suscipit nisl, eu convallis ligula orci eu erat. Fusce et ex dignissim eros porta eleifend in quis sapien. Suspendisse potenti. Quisque non vehicula mauris, eget ornare tellus. Pellentesque aliquet massa augue, sed hendrerit massa condimentum eget. Nunc vulputate neque nunc, ac interdum velit tristique sed. Donec vestibulum nibh at tellus condimentum, sed rutrum quam pellentesque. Mauris congue blandit justo, a auctor est. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse et sem vulputate, malesuada lectus ultrices, luctus elit.

Ut enim metus, lobortis in malesuada sed, fringilla sit amet velit. Phasellus nec tincidunt risus. Nam id nulla et dolor tempor consectetur elementum sit amet lacus. Nunc non felis enim. Curabitur feugiat at quam ac auctor. Duis nibh enim, consequat id sagittis vitae, pharetra nec arcu. Pellentesque vitae nisl tincidunt purus faucibus dignissim ut egestas enim. Integer gravida suscipit interdum. Nunc ac tellus urna. Proin odio quam, pulvinar sed tristique sed, viverra sed mi. Phasellus dapibus ipsum in tempor aliquet. Nam a lectus eu purus volutpat sodales eu at ante. Duis quis scelerisque lectus. Mauris interdum massa quis nisi luctus tincidunt. Etiam ut varius arcu, venenatis lacinia nulla. Cras tristique porta accumsan.

Nam dignissim risus tellus, sit amet faucibus mi dignissim eget. Sed luctus dolor et augue convallis tristique. Etiam sed urna urna. Etiam id lacinia neque. Aliquam ac sapien lacus. Ut lacus quam, efficitur a orci a, gravida porttitor dui. Nunc eget augue vehicula, congue mi ultrices, tempus neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Nullam at venenatis ante. Ut odio justo, auctor non lacinia at, sollicitudin vel augue. Pellentesque urna felis, posuere sit amet lacus fermentum, congue dignissim elit. Phasellus eleifend lectus vitae arcu tristique, et pellentesque nunc venenatis. Duis at est velit. Nullam vestibulum lorem auctor vestibulum ornare. Mauris sed libero ut libero pellentesque fermentum eget eu nisi. Nam augue dolor, mollis ut volutpat eget, vulputate sit amet nisl. Etiam at elit dapibus, laoreet est at, sagittis nisl. Pellentesque sed risus in quam pretium porta sed vitae velit. Phasellus risus odio, imperdiet vel vulputate eget, imperdiet eu nisl. Aliquam ultrices lorem nec aliquet consectetur.</p>
           <br />
      </div>
    <div id="img2">
    <img src="someImage.png" />
    </div>

CSS:

body {
min-width:800px;
margin: 0;
background-color:blue; <!--this is a image -->
background-size: 100% auto;
background-attachment:fixed;
height:100%;

}

#menubar{
position:fixed;
top:5px;
right:0;
background-color:none;
height:auto;
z-index:1;
}


#container{
position:absolute;
top:75%;
}

#content{
width:100%;
background-color:white;
margin:0;
}


#img2{
width:100%;
margin:0;
}

#img2 img{
width:100%;
}

Answer 1

В приведенном вами примере они используют jquery.smoothwheel по IntelliJ IDEA.

Проверьте эту ссылку. Может быть, это эффект, который вы ищете.

Надеюсь, это полезно!

Редактировать с помощью OP:

После того, как @Academia дала мне эту скрипку, мне удалось заставить ее работать для моих нужд.

Вот чем я закончил:

CSS:

body {
    background: url(someImage.png); 
    background-size: 100% auto;
    background-attachment:fixed;
    margin: 0 auto;
    width:100%;
    height:1000px; /*key value to make this script work, else it only scrolls smoothly when your mouse is hovering over the #container*/
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    position:relative;

}

#container{
     width:100%;
    background-color:white;
    position:absolute;
    top:700px; /*I intent to scroll the content over the bg image, that was my struggle, I had it in procentage first*/
}

#content{
    width:100%;
    background-color:white;
    margin:0;
}

HTML:

<body>   

    <div id="container">
        <div id="content">
<p>some content</p>
  </div>
 </div>
</body>

Теперь для JavaScript, я должен был добавить функцию, которая будет держать top значение контейнера соответствует ширине экрана

скрипт для плавной прокрутки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script src="js/jquery.smoothwheel.js"></script>

<script>

    $(document).ready(function () {
        $("body").smoothWheel()
    });

</script>

сценарий для top значение container 0,36, потому что 1920/700 = 0,36, это зависит от top значение, которое вы хотите иметь:

<script type="text/javascript">
   $(document).ready(function () {
   var jqeuryElem = jQuery("#container");
   var w = $(window).width();
   var top = w *0.36;

   jqeuryElem.css("top", top+"px");


   });
   $(window).resize(function () {
       var jqeuryElem = jQuery("#container");
       var w = $(window).width();
       var top = w * 0.36;

       jqeuryElem.css("top", top + "px");
   });
    </script>

Я опубликую результат, когда сайт будет готов.